fix: Change option styles (#358)

c479d704 · gabriellsh · GitHub · 85f9fa13 · 85f9fa13 · c479d704
Unverified Commit c479d704 authored Jan 11, 2021 by gabriellsh Committed by GitHub Jan 11, 2021
18 changed files
--- a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_Default.png
+++ b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_Default.png
--- a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_Skeleton.png
+++ b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_Skeleton.png
--- a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_asUserItem.png
+++ b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_asUserItem.png
--- a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_withAvatar.png
+++ b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_withAvatar.png
--- a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_withIcon.png
+++ b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_withIcon.png
--- a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_withMenu.png
+++ b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_withMenu.png
--- a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_withPresence.png
+++ b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option_withPresence.png
--- a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Options_CheckOption.png
+++ b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Options_CheckOption.png
--- a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_Default.png
+++ b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_Default.png
--- a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_Skeleton.png
+++ b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_Skeleton.png
--- a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_asUserItem.png
+++ b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_asUserItem.png
--- a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_withAvatar.png
+++ b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_withAvatar.png
--- a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_withIcon.png
+++ b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_withIcon.png
--- a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_withMenu.png
+++ b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_withMenu.png
--- a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_withPresence.png
+++ b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Option_withPresence.png
--- a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Options_CheckOption.png
+++ b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Options_Options_CheckOption.png
--- 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>
 );


--- 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 {