[CORL-263, CORL-225] Story Titles, Moderate Story, Mini Unit (#2294)

* feat: show story title + moderate this story link

* feat: introduce mini unit

* test: add tests for moderate story link

* fix: snapshot

* fix: lint / test

* fix: unwanted margin

src/core/client/ui/components/AppBar/AppBar.css

@@ -6,13 +6,13 @@
 .container {
   max-width: 1280px;
   margin: 0 auto;
-  height: calc(5 * var(--spacing-unit));
+  height: calc(7 * var(--mini-unit));
   box-sizing: border-box;
 }
 
 .gutterBegin {
-  padding-left: calc(2 * var(--spacing-unit));
+  padding-left: calc(2 * var(--mini-unit));
 }
 .gutterEnd {
-  padding-right: calc(2 * var(--spacing-unit));
+  padding-right: calc(2 * var(--mini-unit));
 }

src/core/client/ui/components/AppBar/NavigationItem.css

@@ -7,7 +7,7 @@
   height: 100%;
   display: inline-flex;
   align-items: center;
-  padding: 0 var(--spacing-unit);
+  padding: 0 var(--mini-unit);
   text-transform: uppercase;
   text-decoration: none;
   &:hover {

src/core/client/ui/components/Brand/Logo.css

@@ -2,5 +2,5 @@
 }
 
 .icon {
-  margin-right: var(--spacing-unit);
+  margin-right: var(--mini-unit);
 }

src/core/client/ui/components/Button/Button.css

@@ -9,7 +9,7 @@
   border: 0px solid transparent;
 
   & > * {
-    margin: 0 calc(0.5 * var(--spacing-unit)) 0 0;
+    margin: 0 calc(0.5 * var(--mini-unit)) 0 0;
     /* convince safari */
     align-self: center;
   }

src/core/client/ui/components/Button/Button.mdx

@@ -7,6 +7,7 @@ import { Playground } from "docz";
 import Button from "./Button";
 import ButtonIcon from "./ButtonIcon";
 import Icon from "../Icon";
+import TextField from "../TextField";
 import Flex from "../Flex";
 
 # Button
@@ -148,3 +149,58 @@ import Flex from "../Flex";
     </Button>
   </Flex>
 </Playground>
+
+## Underlined Button
+
+<Playground>
+  <Flex itemGutter wrap>
+    <Button variant="underlined">Push Me</Button>
+    <Button variant="underlined" size="small">
+      Push Me
+    </Button>
+    <Button variant="underlined" size="large">
+      Push Me
+    </Button>
+    <Button variant="underlined" color="primary">
+      Push Me
+    </Button>
+    <Button variant="underlined" color="error">
+      Push Me
+    </Button>
+    <Button variant="underlined" color="success">
+      Push Me
+    </Button>
+    <Button variant="underlined" color="dark">
+      Push Me
+    </Button>
+    <Button variant="underlined" disabled>
+      Push Me
+    </Button>
+    <Button variant="underlined" active>
+      Push Me
+    </Button>
+    <Button variant="underlined">
+      <Icon>face</Icon>
+      <span>Push Me</span>
+    </Button>
+    <Button variant="underlined" fullWidth>
+      Push Me
+    </Button>
+  </Flex>
+</Playground>
+
+## TextField Adornment
+
+<Playground>
+  <Flex itemGutter wrap>
+    <TextField
+      placeholder="This is a placeholder"
+      variant="seamlessAdornment"
+      adornment={
+        <Button variant="adornment" color="dark">
+          <Icon size="md">search</Icon>
+        </Button>
+      }
+    />
+  </Flex>
+</Playground>

src/core/client/ui/components/CallOut/CallOut.css

@@ -4,7 +4,7 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: var(--spacing-unit);
+  padding: var(--mini-unit);
   box-sizing: border-box;
   border-width: 1px;
   border-style: solid;

src/core/client/ui/components/Card/Card.css

@@ -1,6 +1,6 @@
 .root {
   position: relative;
-  padding: calc(2 * var(--spacing-unit));
+  padding: calc(2 * var(--mini-unit));
   box-sizing: border-box;
   border: 1px solid rgba(0, 0, 0, 0.25);
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);

src/core/client/ui/components/Card/CloseButton.css

@@ -1,7 +1,7 @@
 .root {
   min-height: 0px;
-  padding: calc(0.5 * var(--spacing-unit));
-  margin-left: calc(2 * var(--spacing-unit));
+  padding: calc(0.5 * var(--mini-unit));
+  margin-left: calc(2 * var(--mini-unit));
   float: right;
   position: relative;
   top: -5px;

src/core/client/ui/components/Dropdown/Button.css

@@ -3,7 +3,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: calc(0.5 * var(--spacing-unit)) var(--spacing-unit);
+  padding: calc(0.5 * var(--mini-unit)) var(--mini-unit);
   width: 100%;
   text-align: left;
 }
@@ -18,10 +18,10 @@
 
 .icon {
   color: var(--palette-grey-main);
-  margin-left: var(--spacing-unit);
+  margin-left: var(--mini-unit);
   padding-top: 1px;
 }
 
 .blankAdornment {
-  padding-right: calc(3.5 * var(--spacing-unit));
+  padding-right: calc(3.5 * var(--mini-unit));
 }

src/core/client/ui/components/Dropdown/Divider.css

@@ -2,5 +2,5 @@
   border: 0;
   border-bottom: 1px solid var(--palette-divider);
   padding-top: 1px;
-  margin: calc(0.5 * var(--spacing-unit)) 0;
+  margin: calc(0.5 * var(--mini-unit)) 0;
 }

src/core/client/ui/components/Dropdown/Dropdown.css

@@ -1,3 +1,3 @@
 .root {
-  padding: calc(0.5 * var(--spacing-unit)) 0;
+  padding: calc(0.5 * var(--mini-unit)) 0;
 }

src/core/client/ui/components/Flex/Flex.css

@@ -7,21 +7,21 @@
 
 .halfItemGutter {
   & > * {
-    margin: 0 calc(0.5 * var(--spacing-unit)) 0 0 !important;
+    margin: 0 calc(0.5 * var(--mini-unit)) 0 0 !important;
   }
   &.directionRowReverse {
     & > * {
-      margin: 0 0 0 calc(0.5 * var(--spacing-unit)) !important;
+      margin: 0 0 0 calc(0.5 * var(--mini-unit)) !important;
     }
   }
   &.directionColumn {
     & > * {
-      margin: 0 0 calc(0.5 * var(--spacing-unit)) 0 !important;
+      margin: 0 0 calc(0.5 * var(--mini-unit)) 0 !important;
     }
   }
   &.directionColumnReverese {
     & > * {
-      margin: calc(0.5 * var(--spacing-unit)) 0 0 0 !important;
+      margin: calc(0.5 * var(--mini-unit)) 0 0 0 !important;
     }
   }
   & > *:last-child {
@@ -31,21 +31,21 @@
 
 .doubleItemGutter {
   & > * {
-    margin: 0 calc(2 * var(--spacing-unit)) 0 0 !important;
+    margin: 0 calc(2 * var(--mini-unit)) 0 0 !important;
   }
   &.directionRowReverse {
     & > * {
-      margin: 0 0 0 calc(2 * var(--spacing-unit)) !important;
+      margin: 0 0 0 calc(2 * var(--mini-unit)) !important;
     }
   }
   &.directionColumn {
     & > * {
-      margin: 0 0 calc(2 * var(--spacing-unit)) 0 !important;
+      margin: 0 0 calc(2 * var(--mini-unit)) 0 !important;
     }
   }
   &.directionColumnReverese {
     & > * {
-      margin: calc(2 * var(--spacing-unit)) 0 0 0 !important;
+      margin: calc(2 * var(--mini-unit)) 0 0 0 !important;
     }
   }
   & > *:last-child {
@@ -55,21 +55,21 @@
 
 .itemGutter {
   & > * {
-    margin: 0 var(--spacing-unit) 0 0 !important;
+    margin: 0 var(--mini-unit) 0 0 !important;
   }
   &.directionRowReverse {
     & > * {
-      margin: 0 0 0 var(--spacing-unit) !important;
+      margin: 0 0 0 var(--mini-unit) !important;
     }
   }
   &.directionColumn {
     & > * {
-      margin: 0 0 var(--spacing-unit) 0 !important;
+      margin: 0 0 var(--mini-unit) 0 !important;
     }
   }
   &.directionColumnReverese {
     & > * {
-      margin: var(--spacing-unit) 0 0 0 !important;
+      margin: var(--mini-unit) 0 0 0 !important;
     }
   }
   & > *:last-child {
@@ -89,69 +89,69 @@
 .wrapReverse {
   &:not(.directionColumn).itemGutter {
     &:not(:empty) {
-      margin-top: calc(-1 * var(--spacing-unit)) !important;
+      margin-top: calc(-1 * var(--mini-unit)) !important;
     }
     & > * {
-      margin-top: var(--spacing-unit) !important;
+      margin-top: var(--mini-unit) !important;
     }
   }
   &.directionColumn.itemGutter {
     &:not(:empty) {
-      margin-left: calc(-1 * var(--spacing-unit)) !important;
+      margin-left: calc(-1 * var(--mini-unit)) !important;
     }
     &.itemGutter > * {
-      margin-left: var(--spacing-unit) !important;
+      margin-left: var(--mini-unit) !important;
     }
   }
 
   &:not(.directionColumn).halfItemGutter {
     &:not(:empty) {
-      margin-top: calc(-0.5 * var(--spacing-unit)) !important;
+      margin-top: calc(-0.5 * var(--mini-unit)) !important;
     }
     & > * {
-      margin-top: calc(0.5 * var(--spacing-unit)) !important;
+      margin-top: calc(0.5 * var(--mini-unit)) !important;
     }
   }
   &.directionColumn.halfItemGutter {
     &:not(:empty) {
-      margin-left: calc(-0.5 * var(--spacing-unit)) !important;
+      margin-left: calc(-0.5 * var(--mini-unit)) !important;
     }
     &.halfItemGutter > * {
-      margin-left: calc(0.5 * var(--spacing-unit)) !important;
+      margin-left: calc(0.5 * var(--mini-unit)) !important;
     }
   }
 
   &:not(.directionColumn).doubleItemGutter {
     &:not(:empty) {
-      margin-top: calc(-2 * var(--spacing-unit)) !important;
+      margin-top: calc(-2 * var(--mini-unit)) !important;
     }
     & > * {
-      margin-top: calc(2 * var(--spacing-unit)) !important;
+      margin-top: calc(2 * var(--mini-unit)) !important;
     }
   }
   &.directionColumn.doubleItemGutter {
     &:not(:empty) {
-      margin-left: calc(-2 * var(--spacing-unit)) !important;
+      margin-left: calc(-2 * var(--mini-unit)) !important;
     }
     &.doubleItemGutter > * {
-      margin-left: calc(2 * var(--spacing-unit)) !important;
+      margin-left: calc(2 * var(--mini-unit)) !important;
     }
   }
 
   &:not(.directionColumn).tripleItemGutter {
     &:not(:empty) {
-      margin-top: calc(-3 * var(--spacing-unit)) !important;
+      margin-top: calc(-3 * var(--mini-unit)) !important;
     }
     & > * {
-      margin-top: calc(3 * var(--spacing-unit)) !important;
+      margin-top: calc(3 * var(--mini-unit)) !important;
     }
   }
   &.directionColumn.tripleItemGutter {
     &:not(:empty) {
-      margin-left: calc(-3 * var(--spacing-unit)) !important;
+      margin-left: calc(-3 * var(--mini-unit)) !important;
     }
     &.tripleItemGutter > * {
-      margin-left: calc(3 * var(--spacing-unit)) !important;
+      margin-left: calc(3 * var(--mini-unit)) !important;
     }
   }
 }

src/core/client/ui/components/HorizontalGutter/HorizontalGutter.css

@@ -6,7 +6,7 @@
 
 .half {
   & > * {
-    margin: 0 0 calc(0.5 * var(--spacing-unit)) 0 !important;
+    margin: 0 0 calc(0.5 * var(--mini-unit)) 0 !important;
   }
   & > *:last-child {
     margin: 0 !important;
@@ -14,7 +14,7 @@
 }
 .full {
   & > * {
-    margin: 0 0 var(--spacing-unit) 0 !important;
+    margin: 0 0 var(--mini-unit) 0 !important;
   }
   & > *:last-child {
     margin: 0 !important;
@@ -22,7 +22,7 @@
 }
 .oneAndAHalf {
   & > * {
-    margin: 0 0 calc(1.5 * var(--spacing-unit)) 0 !important;
+    margin: 0 0 calc(1.5 * var(--mini-unit)) 0 !important;
   }
   & > *:last-child {
     margin: 0 !important;
@@ -30,7 +30,7 @@
 }
 .double {
   & > * {
-    margin: 0 0 calc(2 * var(--spacing-unit)) 0 !important;
+    margin: 0 0 calc(2 * var(--mini-unit)) 0 !important;
   }
   & > *:last-child {
     margin: 0 !important;
@@ -38,7 +38,7 @@
 }
 .triple {
   & > * {
-    margin: 0 0 calc(3 * var(--spacing-unit)) 0 !important;
+    margin: 0 0 calc(3 * var(--mini-unit)) 0 !important;
   }
   & > *:last-child {
     margin: 0 !important;

src/core/client/ui/components/Icon/Icon.css

@@ -25,6 +25,11 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.xs {
+  font-size: 10px;
+  width: 10px;
+}
+
 .sm {
   font-size: 14px;
   width: 14px;

src/core/client/ui/components/Icon/Icon.tsx

@@ -13,7 +13,7 @@ interface Props extends HTMLAttributes<HTMLSpanElement> {
    */
   classes: typeof styles;
 
-  size?: "sm" | "md" | "lg" | "xl";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
 
   /**
    * The color of the component. It supports those theme colors that make sense for this component.

src/core/client/ui/components/Marker/Count.css

@@ -1,10 +1,10 @@
 .root {
   composes: markerText from "talk-ui/shared/typography.css";
   border-left: 1px solid currentColor;
-  margin-left: calc(0.5 * var(--spacing-unit));
-  margin-right: calc(-0.5 * var(--spacing-unit));
+  margin-left: calc(0.5 * var(--mini-unit));
+  margin-right: calc(-0.5 * var(--mini-unit));
   padding-top: 2px;
   padding-bottom: 2px;
-  padding-left: calc(0.5 * var(--spacing-unit));
+  padding-left: calc(0.5 * var(--mini-unit));
   white-space: nowrap;
 }

src/core/client/ui/components/Marker/Marker.css

@@ -3,7 +3,7 @@
   color: var(--palette-error-main);
   border: 1px solid currentColor;
   border-radius: 4px;
-  padding: 1px var(--spacing-unit);
+  padding: 1px var(--mini-unit);
   white-space: nowrap;
 }
 

src/core/client/ui/components/Message/Message.css

@@ -4,12 +4,12 @@
   display: inline-flex;
   justify-content: flex-start;
   align-items: center;
-  padding: calc(0.5 * var(--spacing-unit)) var(--spacing-unit);
+  padding: calc(0.5 * var(--mini-unit)) var(--mini-unit);
   box-sizing: border-box;
   border-radius: var(--round-corners);
   border-width: 1px;
   border-style: solid;
-  border-left-width: calc(0.5 * var(--spacing-unit));
+  border-left-width: calc(0.5 * var(--mini-unit));
 }
 
 .colorGrey {
@@ -28,7 +28,7 @@
   background-color: var(--palette-error-light);
   border-color: var(--palette-error-darkest);
   border-width: 0px;
-  border-left-width: calc(0.5 * var(--spacing-unit));
+  border-left-width: calc(0.5 * var(--mini-unit));
   color: var(--palette-text-light);
 }
 
@@ -36,7 +36,7 @@
   background-color: var(--palette-primary-light);
   border-color: var(--palette-primary-darkest);
   border-width: 0px;
-  border-left-width: calc(0.5 * var(--spacing-unit));
+  border-left-width: calc(0.5 * var(--mini-unit));
   color: var(--palette-text-light);
 }
 

src/core/client/ui/components/Message/MessageIcon.css

@@ -3,6 +3,6 @@
   margin-top: 1px;
   flex-shrink: 0;
   &:first-child {
-    margin-right: calc(0.5 * var(--spacing-unit));
+    margin-right: calc(0.5 * var(--mini-unit));
   }
 }

src/core/client/ui/components/PasswordField/PasswordField.css

@@ -1,5 +1,5 @@
 .root {
-  width: calc(29 * var(--spacing-unit));
+  width: calc(29 * var(--mini-unit));
   height: 36px;
   width: 100%;
   line-height: 36px;
@@ -35,7 +35,7 @@
   position: absolute;
   display: inline-block;
   right: 0px;
-  padding: 4px calc(1 * var(--spacing-unit));
+  padding: 4px calc(1 * var(--mini-unit));
   cursor: pointer;
   line-height: 0;
 }
@@ -43,8 +43,8 @@
 .input {
   composes: inputText placeholderPseudo from "talk-ui/shared/typography.css";
   display: block;
-  padding: calc(0.5 * var(--spacing-unit)) calc(3 * var(--spacing-unit))
-    calc(0.5 * var(--spacing-unit)) calc(0.5 * var(--spacing-unit));
+  padding: calc(0.5 * var(--mini-unit)) calc(3 * var(--mini-unit))
+    calc(0.5 * var(--mini-unit)) calc(0.5 * var(--mini-unit));
   border-radius: var(--round-corners);
   width: 100%;
   height: 100%;

src/core/client/ui/components/Popover/Popover.css

@@ -11,14 +11,14 @@
 }
 
 .top {
-  margin: calc(0.5 * var(--spacing-unit)) 0;
+  margin: calc(0.5 * var(--mini-unit)) 0;
 }
 .left {
-  margin: 0 calc(0.5 * var(--spacing-unit));
+  margin: 0 calc(0.5 * var(--mini-unit));
 }
 .right {
-  margin: 0 calc(0.5 * var(--spacing-unit));
+  margin: 0 calc(0.5 * var(--mini-unit));
 }
 .bottom {
-  margin: calc(0.5 * var(--spacing-unit)) 0;
+  margin: calc(0.5 * var(--mini-unit)) 0;
 }

src/core/client/ui/components/SelectField/SelectField.css

@@ -8,7 +8,7 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  right: calc(0.5 * var(--spacing-unit));
+  right: calc(0.5 * var(--mini-unit));
   height: 100%;
   user-select: none;
   pointer-events: none;
@@ -46,8 +46,8 @@
   border-radius: var(--round-corners);
   background-color: var(--palette-common-white);
 
-  padding: calc(0.5 * var(--spacing-unit)) calc(2 * var(--spacing-unit))
-    calc(0.5 * var(--spacing-unit)) var(--spacing-unit);
+  padding: calc(0.5 * var(--mini-unit)) calc(2 * var(--mini-unit))
+    calc(0.5 * var(--mini-unit)) var(--mini-unit);
 
   &::-ms-expand {
     display: none;

src/core/client/ui/components/Steps/StepBar.css

@@ -2,5 +2,5 @@
   width: 100%;
   position: relative;
   display: block;
-  padding: calc(2 * var(--spacing-unit)) 0;
+  padding: calc(2 * var(--mini-unit)) 0;
 }

src/core/client/ui/components/SubBar/Navigation.css

@@ -1,7 +1,7 @@
 .root {
   height: 100%;
   border-bottom: 1px solid var(--palette-divider);
-  padding: 0 calc(1.5 * var(--spacing-unit));
+  padding: 0 calc(1.5 * var(--mini-unit));
 }
 
 .ul {
@@ -13,7 +13,7 @@
   align-items: flex-end;
 
   & > * {
-    margin: 0 calc(3 * var(--spacing-unit)) 0 0;
+    margin: 0 calc(3 * var(--mini-unit)) 0 0;
   }
   & > *:last-child {
     margin: 0;

src/core/client/ui/components/SubBar/NavigationItem.css

@@ -16,7 +16,7 @@
     cursor: pointer;
   }
   & > * {
-    margin: 0 calc(0.5 * var(--spacing-unit)) 0 0;
+    margin: 0 calc(0.5 * var(--mini-unit)) 0 0;
   }
   & > *:last-child {
     margin: 0;

src/core/client/ui/components/SubBar/SubBar.css

@@ -1,6 +1,6 @@
 .root {
   background-color: var(--palette-common-white);
-  height: calc(5 * var(--spacing-unit));
+  height: calc(6 * var(--mini-unit));
 }
 
 .container {
@@ -12,8 +12,8 @@
 }
 
 .gutterBegin {
-  padding-left: calc(2 * var(--spacing-unit));
+  padding-left: calc(2 * var(--mini-unit));
 }
 .gutterEnd {
-  padding-right: calc(2 * var(--spacing-unit));
+  padding-right: calc(2 * var(--mini-unit));
 }

src/core/client/ui/components/Table/TableCell.css

@@ -1,8 +1,8 @@
 .root {
   /* acts like min-width in a cell */
-  height: calc(4.5 * var(--spacing-unit));
+  height: calc(4.5 * var(--mini-unit));
   text-align: left;
-  padding: var(--spacing-unit) calc(1.5 * var(--spacing-unit));
+  padding: var(--mini-unit) calc(1.5 * var(--mini-unit));
   box-sizing: border-box;
 }
 

src/core/client/ui/components/Tabs/Tab.css

@@ -10,7 +10,7 @@
   box-sizing: border-box;
   border-bottom: 0;
   list-style: none;
-  padding: var(--spacing-unit);
+  padding: var(--mini-unit);
   font-weight: var(--font-weight-regular);
   font-family: var(--font-family-serif);
 
@@ -32,12 +32,12 @@
   background: var(--palette-grey-lightest);
   color: var(--palette-grey-main);
   border: 1px solid var(--palette-grey-lighter);
-  padding: calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) * 2);
+  padding: calc(0.5 * var(--mini-unit)) calc(var(--mini-unit) * 2);
   &.active {
     background-color: var(--palette-common-white);
     color: var(--palette-common-black);
     border-bottom: 0;
-    border-top-width: calc(0.5 * var(--spacing-unit));
+    border-top-width: calc(0.5 * var(--mini-unit));
     border-top-color: var(--palette-primary-main);
     border-radius: 0;
     z-index: 10;
@@ -45,7 +45,7 @@
 }
 
 .secondary {
-  padding: calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) * 2);
+  padding: calc(0.5 * var(--mini-unit)) calc(var(--mini-unit) * 2);
 
   &.active {
     font-weight: var(--font-weight-medium);

src/core/client/ui/components/TextField/TextField.css

@@ -1,6 +1,6 @@
 .root {
   display: flex;
-  width: calc(29 * var(--spacing-unit));
+  width: calc(29 * var(--mini-unit));
   align-items: center;
   height: 36px;
 }
@@ -9,7 +9,7 @@
   composes: inputText placeholderPseudo from "talk-ui/shared/typography.css";
   position: relative;
   display: block;
-  padding: calc(0.5 * var(--spacing-unit));
+  padding: calc(0.5 * var(--mini-unit));
   box-sizing: border-box;
   border-radius: var(--round-corners);
   width: 100%;
@@ -26,7 +26,7 @@
 }
 
 .adornment {
-  margin-left: calc(0.5 * var(--spacing-unit));
+  margin-left: calc(0.5 * var(--mini-unit));
 }
 
 .colorRegular {

src/core/client/ui/components/TextLink/TextLink.css

@@ -2,3 +2,9 @@
   color: var(--palette-primary-main);
   text-decoration: underline;
 }
+
+.icon {
+  padding-left: calc(0.5 * var(--mini-unit));
+  padding-bottom: 2px;
+  text-decoration: none;
+}

src/core/client/ui/components/TextLink/TextLink.tsx

@@ -1,11 +1,14 @@
 import cn from "classnames";
 import React, { AnchorHTMLAttributes, StatelessComponent } from "react";
+import { Icon } from "talk-ui/components";
 
 import { withStyles } from "talk-ui/hocs";
 
 import styles from "./TextLink.css";
 
 interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** external if set to true will show a little icon that indicates an external link */
+  external?: boolean;
   /**
    * Override or extend the styles applied to the component.
    */
@@ -13,7 +16,7 @@ interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
 }
 
 const TextLinkProps: StatelessComponent<Props> = props => {
-  const { className, children, classes, ...rest } = props;
+  const { className, children, classes, external, ...rest } = props;
 
   const rootClassName = cn(classes.root, className);
 
@@ -24,6 +27,11 @@ const TextLinkProps: StatelessComponent<Props> = props => {
       {...rest}
     >
       {children}
+      {external && (
+        <Icon className={styles.icon} size="xs">
+          launch
+        </Icon>
+      )}
     </a>
   );
 };

src/core/client/ui/components/TileSelector/TileOption.css

@@ -14,7 +14,7 @@
   border: 1px solid var(--palette-grey-dark);
   border-radius: 2px;
   color: var(--palette-grey-dark);
-  padding: calc(0.5 * var(--spacing-unit));
+  padding: calc(0.5 * var(--mini-unit));
   line-height: 1;
   box-sizing: border-box;
   height: 100%;

src/core/client/ui/components/Typography/Typography.css

@@ -99,7 +99,7 @@
 }
 
 .paragraph {
-  margin-bottom: var(--spacing-unit);
+  margin-bottom: var(--mini-unit);
 }
 
 .colorPrimary {

src/core/client/ui/theme/variables.css

@@ -6,11 +6,11 @@
 */
 
 :root {
-  --spacing-unit: calc(1px * var(--spacing-unit-small));
+  --mini-unit: calc(1px * var(--mini-unit-small));
 }
 
 @media (min-width: $breakpoints-xs) {
   :root {
-    --spacing-unit: calc(1px * var(--spacing-unit-large));
+    --mini-unit: calc(1px * var(--mini-unit-large));
   }
 }

src/core/client/ui/theme/variables.ts

@@ -73,8 +73,8 @@ const variables = {
     },
   },
   /* gitter and spacing */
-  spacingUnitSmall: 5,
-  spacingUnitLarge: 10,
+  miniUnitSmall: 4,
+  miniUnitLarge: 8,
   /* Borders */
   roundCorners: "2px",
   /* Typography */