Few control changes for better aligment (#45)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vela/ui",
-  "version": "0.6.28",
+  "version": "0.6.29",
   "description": "Vela React UI Toolkit",
   "main": "src/index.js",
   "scripts": {

src/components/Control.js

@@ -4,6 +4,7 @@ import { useTheme } from "../lib/theme";
 import Label from "./Label";
 import Box from "./Box";
 import Footnote from "./Typography/Footnote";
+import { Paragraph } from "@vela/ui";
 
 function Control({ options, onSelect, selected }) {
   const { colors } = useTheme();
@@ -14,7 +15,7 @@ function Control({ options, onSelect, selected }) {
         const isSelected = value === selected;
         return (
           <Box key={`note-${value}`}>
-            {isSelected && <Footnote>{description}</Footnote>}
+            {isSelected && <Paragraph>{description}</Paragraph>}
           </Box>
         );
       })}
@@ -28,14 +29,12 @@ function Control({ options, onSelect, selected }) {
             marginTop: 12,
           };
           const baseItemStyle = {
-            padding: 12,
+            padding: 0,
             flex: 1,
             justifyContent: "center",
             flexDirection: "column",
             alignItems: "center",
             borderRadius: 46,
-            height: 64,
-            width: 64,
             ...(isSelected && {
               backgroundColor: colors.text,
             }),
@@ -48,7 +47,7 @@ function Control({ options, onSelect, selected }) {
           const baseIconStyle = {
             width: 16,
             height: 16,
-            marginRight: 4,
+            marginBottom: 4,
             color: isSelected ? colors.background : colors.disabled,
           };
           const Icon = icon;

src/lib/theme.js

@@ -1,113 +1,113 @@
-import {createContext, useContext} from 'react'
-import {useWindowDimensions} from 'react-native'
-export const ThemeContext = createContext('light')
-export const LocaleContext = createContext('pt-BR')
+import { createContext, useContext } from "react";
+import { useWindowDimensions } from "react-native";
+export const ThemeContext = createContext("light");
+export const LocaleContext = createContext("pt-BR");
 
 const MAP_STYLE = {
   light: {
-    mapStyle: 'lightTheme',
+    mapStyle: "lightTheme",
   },
   dark: {
-    mapStyle: 'darkTheme',
-  }
-}
+    mapStyle: "darkTheme",
+  },
+};
 
 const pallete = {
-  white: '#FFFFFF',
-  black: '#000000',
-  vela: '#3D9771'
-}
+  white: "#FFFFFF",
+  black: "#000000",
+  vela: "#3D9771",
+};
 
 const SPACING_MAP = {
   small: 16,
   medium: 24,
-  large:  24
-}
+  large: 24,
+};
 
 const FONTSIZE_MAP = {
   small: 16,
   medium: 16,
-  large: 16
-}
+  large: 16,
+};
 
 const BREAKPOINT_MAP = {
   small: 480,
   medium: 1024,
-  large: 1366
-}
+  large: 1366,
+};
 
 const COLOR_MAP = {
   light: {
-    background: '#E8E8E8',
-    midground: '#EFEFEF',
-    foreground: '#FFFEFE',
-    title: '#4B4A4A',
-    text: '#2D2D2D',
-    footnote: '#7B7B7B',
-    placeholder: '#7B7B7B',
-    anchor: '#21C2E0',
-    input: '#E8E8E8',
-    border: '#D6D4D4',
-    brand: '#43CD8B',
-    primary: '#43CD8B',
-    secondary: '#1FBCDA',
-    negative: '#E52B1F',
-    disabled: '#D6D4D4',
+    background: "#E8E8E8",
+    midground: "#EFEFEF",
+    foreground: "#FFFEFE",
+    title: "#4B4A4A",
+    text: "#2D2D2D",
+    footnote: "#7B7B7B",
+    placeholder: "#7B7B7B",
+    anchor: "#21C2E0",
+    input: "#E8E8E8",
+    border: "#D6D4D4",
+    brand: "#43CD8B",
+    primary: "#43CD8B",
+    secondary: "#1FBCDA",
+    negative: "#E52B1F",
+    disabled: "#D6D4D4",
     cta: "#FF6574",
-    charge: '#EF2248',
-    alert: '#E52B1F',
-    warning: '#FFAF2D',
+    charge: "#EF2248",
+    alert: "#E52B1F",
+    warning: "#FFAF2D",
     googlebutton: pallete.white,
-    applebutton: pallete.black
+    applebutton: pallete.black,
   },
   dark: {
-    background: '#1D1D1D',
-    midground: '#2D2D2D',
-    foreground: '#414242',
-    title: '#EFEFEF',
-    text: '#FFFEFE',
-    footnote: '#C3BEBE',
-    placeholder: '#4B4A4A',
-    anchor: '#78DEF5',
-    input: '#1D1D1D',
-    border: '#4B4A4A',
-    brand: '#3BB77C',
-    primary: '#84E8CD',
-    secondary: '#78DEF5',
-    negative: '#FA4242',
-    disabled: '#7B7B7B',
-    cta: '#FB9199',
-    charge: '#FF6574',
-    alert: '#FA4242',
-    warning: '#FFCF39',
+    background: "#1D1D1D",
+    midground: "#2D2D2D",
+    foreground: "#414242",
+    title: "#EFEFEF",
+    text: "#FFFEFE",
+    footnote: "#C3BEBE",
+    placeholder: "#4B4A4A",
+    anchor: "#78DEF5",
+    input: "#1D1D1D",
+    border: "#4B4A4A",
+    brand: "#3BB77C",
+    primary: "#84E8CD",
+    secondary: "#78DEF5",
+    negative: "#FA4242",
+    disabled: "#7B7B7B",
+    cta: "#FB9199",
+    charge: "#FF6574",
+    alert: "#FA4242",
+    warning: "#FFCF39",
     googlebutton: pallete.white,
-    applebutton: pallete.white
-  }
-}
+    applebutton: pallete.white,
+  },
+};
 
 const theme = ({ variant, breakpoint, locale }) => {
-  const baseSpacing = SPACING_MAP[breakpoint]
-  const baseFontSize = FONTSIZE_MAP[breakpoint]
+  const baseSpacing = SPACING_MAP[breakpoint];
+  const baseFontSize = FONTSIZE_MAP[breakpoint];
 
   const layout = {
     xsmall: baseSpacing * 5,
     small: baseSpacing * 8,
     medium: baseSpacing * 16,
     large: baseSpacing * 32,
-    xlarge: baseSpacing * 48
-  }
+    xlarge: baseSpacing * 48,
+  };
 
   const margin = {
     xsmall: baseSpacing / 8,
     small: baseSpacing / 4,
     medium: baseSpacing / 2,
     large: baseSpacing,
-    xlarge: baseSpacing * 2
-  }
+    xlarge: baseSpacing * 2,
+  };
 
-  const colors = COLOR_MAP[variant]
+  const colors = COLOR_MAP[variant];
 
-  const mapTheme = MAP_STYLE[variant]
+  const mapTheme = MAP_STYLE[variant];
 
   const text = {
     size: {
@@ -116,25 +116,25 @@ const theme = ({ variant, breakpoint, locale }) => {
       medium: baseFontSize,
       large: baseFontSize * 1.125,
       xlarge: baseFontSize * 1.5,
-      xxlarge: baseFontSize * 2
-    }
-  }
+      xxlarge: baseFontSize * 2,
+    },
+  };
 
   const heading = {
     size: {
       small: text.size.large,
       medium: text.size.xlarge,
       large: text.size.xxlarge,
-    }
-  }
+    },
+  };
 
   const subheading = {
     size: {
       small: text.size.small,
       medium: text.size.large,
       large: text.size.xlarge,
-    }
-  }
+    },
+  };
 
   return {
     baseSpacing,
@@ -147,22 +147,22 @@ const theme = ({ variant, breakpoint, locale }) => {
     typography: {
       text,
       heading,
-      subheading
-    }
-  }
-}
+      subheading,
+    },
+  };
+};
 
-const widhtToBreakpoint = width => {
-  if (width < BREAKPOINT_MAP['small']) return 'small'
-  if (width < BREAKPOINT_MAP['medium']) return 'medium'
-  return 'large'
-}
+const widhtToBreakpoint = (width) => {
+  if (width < BREAKPOINT_MAP["small"]) return "small";
+  if (width < BREAKPOINT_MAP["medium"]) return "medium";
+  return "large";
+};
 
 export function useTheme(value) {
-  const variant = value || useContext(ThemeContext) || "light"
-  const {width} = useWindowDimensions()
-  const breakpoint = widhtToBreakpoint(width)
-  const locale = useContext(LocaleContext)
+  const variant = value || useContext(ThemeContext) || "light";
+  const { width } = useWindowDimensions();
+  const breakpoint = widhtToBreakpoint(width);
+  const locale = useContext(LocaleContext);
 
-  return theme({variant, breakpoint, locale})
+  return theme({ variant, breakpoint, locale });
 }