fix: Change option styles (#358)

RocketChat · Jan 11, 2021 · c479d70 · c479d70
1 parent 85f9fa1
commit c479d70
Show file tree

Hide file tree

Showing 18 changed files with 9 additions and 3 deletions.
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_Default.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_Skeleton.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_Skeleton.png
diff --git a/...ages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_asUserItem.png b/...ages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_asUserItem.png
diff --git a/...ages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_withAvatar.png b/...ages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_withAvatar.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_withIcon.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_withIcon.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_withMenu.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_withMenu.png
diff --git a/...es/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_withPresence.png b/...es/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_withPresence.png
diff --git a/...es/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Options_CheckOption.png b/...es/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Options_CheckOption.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_Default.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_Skeleton.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_Skeleton.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_asUserItem.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_asUserItem.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_withAvatar.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_withAvatar.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_withIcon.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_withIcon.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_withMenu.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_withMenu.png
diff --git a/...ges/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_withPresence.png b/...ges/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_withPresence.png
diff --git a/...ges/fuselage/.loki/reference/chrome_laptop_Misc_Options_Options_CheckOption.png b/...ges/fuselage/.loki/reference/chrome_laptop_Misc_Options_Options_CheckOption.png
diff --git a/packages/fuselage/src/components/Options/Option/index.js b/packages/fuselage/src/components/Options/Option/index.js
@@ -17,7 +17,7 @@ const OptionDescription = (props) => (
 );
 const OptionIcon = ({ name }) => (
   <OptionColumn>
-    <Icon size='x16' name={name} />
+    <Icon size='x20' name={name} />
   </OptionColumn>
 );
 

diff --git a/packages/fuselage/src/components/Options/styles.scss b/packages/fuselage/src/components/Options/styles.scss
@@ -14,7 +14,7 @@
     display: flex;
     align-items: center;
 
-    margin-inline: lengths.margin(-4);
+    margin-inline: lengths.margin(-2);
   }
 
   &:hover,
@@ -51,7 +51,7 @@
 %column {
   flex: 0 0 auto;
 
-  margin-inline: lengths.margin(4);
+  margin-inline: lengths.margin(2);
 }
 
 .rcx-option__avatar {
@@ -69,6 +69,12 @@
 .rcx-option__column {
   @extend %column;
   display: flex;
+
+  justify-content: center;
+  align-items: center;
+
+  min-width: lengths.size(20);
+  min-height: lengths.size(20);
 }
 
 .rcx-option__description {