Merge pull request Expensify#12455 from Expensify/luke-update-button-…

…styles Update Button Styles
margelo · Nov 23, 2022 · 39a68d1 · 39a68d1
2 parents caa5dd2 + e62fd52
commit 39a68d1
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 17 deletions.
diff --git a/src/components/Onfido/BaseOnfidoWeb.js b/src/components/Onfido/BaseOnfidoWeb.js
@@ -33,7 +33,7 @@ class Onfido extends React.Component {
                 colorContentTitle: themeColors.text,
                 colorContentSubtitle: themeColors.text,
                 colorContentBody: themeColors.text,
-                borderRadiusButton: `${variables.componentBorderRadius}px`,
+                borderRadiusButton: `${variables.buttonBorderRadius}px`,
                 colorBackgroundSurfaceModal: themeColors.appBG,
                 colorBorderDocTypeButton: themeColors.border,
                 colorBorderDocTypeButtonHover: themeColors.link,

diff --git a/src/styles/getReportActionContextMenuStyles.js b/src/styles/getReportActionContextMenuStyles.js
@@ -10,7 +10,7 @@ const miniWrapperStyle = [
     styles.flexRow,
     defaultWrapperStyle,
     {
-        borderRadius: variables.componentBorderRadiusNormal,
+        borderRadius: variables.buttonBorderRadius,
         borderWidth: 1,
         borderColor: themeColors.border,
     },

diff --git a/src/styles/getTooltipStyles.js b/src/styles/getTooltipStyles.js
@@ -116,7 +116,7 @@ export default function getTooltipStyles(
         tooltipWrapperStyle: {
             position: 'fixed',
             backgroundColor: themeColors.heading,
-            borderRadius: variables.componentBorderRadiusSmall,
+            borderRadius: variables.buttonBorderRadius,
             ...tooltipVerticalPadding,
             ...spacing.ph2,
             zIndex: variables.tooltipzIndex,

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -339,12 +339,12 @@ const styles = {
     },
 
     borderRadiusNormal: {
-        borderRadius: variables.componentBorderRadiusNormal,
+        borderRadius: variables.buttonBorderRadius,
     },
 
     button: {
         backgroundColor: themeColors.buttonDefaultBG,
-        borderRadius: variables.componentBorderRadiusNormal,
+        borderRadius: variables.buttonBorderRadius,
         height: variables.componentSizeLarge,
         justifyContent: 'center',
         ...spacing.ph3,
@@ -363,32 +363,31 @@ const styles = {
     },
 
     buttonSmall: {
-        borderRadius: variables.componentBorderRadiusNormal,
+        borderRadius: variables.buttonBorderRadius,
         height: variables.componentSizeSmall,
-        paddingTop: 6,
-        paddingRight: 10,
-        paddingBottom: 6,
-        paddingLeft: 10,
+        paddingTop: 10,
+        paddingHorizontal: 14,
+        paddingBottom: 10,
         backgroundColor: themeColors.buttonDefaultBG,
     },
 
     buttonMedium: {
-        borderRadius: variables.componentBorderRadiusNormal,
+        borderRadius: variables.buttonBorderRadius,
         height: variables.componentSizeNormal,
         paddingTop: 6,
-        paddingRight: 12,
+        paddingRight: 16,
         paddingBottom: 6,
-        paddingLeft: 12,
+        paddingLeft: 16,
         backgroundColor: themeColors.buttonDefaultBG,
     },
 
     buttonLarge: {
-        borderRadius: variables.componentBorderRadius,
+        borderRadius: variables.buttonBorderRadius,
         height: variables.componentSizeLarge,
         paddingTop: 8,
-        paddingRight: 14,
+        paddingRight: 18,
         paddingBottom: 8,
-        paddingLeft: 14,
+        paddingLeft: 18,
         backgroundColor: themeColors.buttonDefaultBG,
     },
 
@@ -612,7 +611,7 @@ const styles = {
 
     border: {
         borderWidth: 1,
-        borderRadius: variables.componentBorderRadiusNormal,
+        borderRadius: variables.buttonBorderRadius,
         borderColor: themeColors.border,
     },
 
@@ -2685,6 +2684,7 @@ const styles = {
     errorPageContainer: {
         backgroundColor: themeColors.componentBG,
     },
+
     transferBalancePayment: {
         borderWidth: 1,
         borderRadius: variables.componentBorderRadiusNormal,

diff --git a/src/styles/variables.js b/src/styles/variables.js
@@ -8,6 +8,7 @@ export default {
     componentBorderRadiusSmall: 4,
     componentBorderRadiusNormal: 8,
     componentBorderRadiusCard: 12,
+    buttonBorderRadius: 100,
     avatarSizeLarge: 80,
     avatarSizeNormal: 40,
     avatarSizeSmall: 28,