Design improvements

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

@@ -1,5 +1,6 @@
 .root {
   composes: buttonReset from "talk-ui/shared/buttonReset.css";
+  text-transform: capitalize;
 }
 
 .keyboardFocus {

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

@@ -287,67 +287,57 @@
   padding-right: 0;
   padding-left: 0;
   border-radius: 0;
+  border-bottom: 1px solid currentColor;
+  padding: 0;
 
   &.colorRegular {
     color: var(--palette-grey-main);
-    border-bottom: 1px solid currentColor;
   }
   &.colorPrimary {
     color: var(--palette-primary-main);
-    border-bottom: 1px solid currentColor;
   }
   &.colorError {
     color: var(--palette-error-main);
-    border-bottom: 1px solid currentColor;
   }
   &.colorSuccess {
     color: var(--palette-success-main);
-    border-bottom: 1px solid currentColor;
   }
 
   &:not(.disabled) {
     &.colorRegular {
       &.mouseHover {
         color: var(--palette-grey-light);
-        border-bottom: 1px solid currentColor;
       }
       &:active,
       &.active {
         color: var(--palette-grey-lighter);
-        border-bottom: 1px solid currentColor;
       }
     }
     &.colorPrimary {
       &.mouseHover {
         color: var(--palette-primary-light);
-        border-bottom: 1px solid currentColor;
       }
       &:active,
       &.active {
         color: var(--palette-primary-lighter);
-        border-bottom: 1px solid currentColor;
       }
     }
     &.colorError {
       &.mouseHover {
         color: var(--palette-error-light);
-        border-bottom: 1px solid currentColor;
       }
       &:active,
       &.active {
         color: var(--palette-error-lighter);
-        border-bottom: 1px solid currentColor;
       }
     }
     &.colorSuccess {
       &.mouseHover {
         color: var(--palette-success-light);
-        border-bottom: 1px solid currentColor;
       }
       &:active,
       &.active {
         color: var(--palette-success-lighter);
-        border-bottom: 1px solid currentColor;
       }
     }
   }

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

@@ -5,10 +5,6 @@
   display: flex;
 }
 
-.inline {
-  width: auto;
-}
-
 .halfItemGutter {
   & > * {
     margin: 0 calc(0.5 * var(--spacing-unit)) 0 0 !important;

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

@@ -28,7 +28,6 @@ interface InnerProps {
   itemGutter?: boolean | "half" | "double";
   className?: string;
   wrap?: boolean | "reverse";
-  inline?: boolean;
 
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLDivElement>;
@@ -45,16 +44,9 @@ const Flex: StatelessComponent<InnerProps> = props => {
     wrap,
     forwardRef,
     children,
-    inline,
     ...rest
   } = props;
 
-  let alignItemsWithDefault = alignItems;
-  if (!alignItems) {
-    alignItemsWithDefault =
-      direction && direction.startsWith("column") ? "flex-start" : "center";
-  }
-
   const classObject: Record<string, boolean> = {
     [classes.itemGutter]: itemGutter === true,
     [classes.halfItemGutter]: itemGutter === "half",
@@ -69,19 +61,15 @@ const Flex: StatelessComponent<InnerProps> = props => {
     ] = true;
   }
 
-  if (alignItemsWithDefault) {
-    classObject[
-      (classes as any)[`align${pascalCase(alignItemsWithDefault)}`]
-    ] = true;
+  if (alignItems) {
+    classObject[(classes as any)[`align${pascalCase(alignItems)}`]] = true;
   }
 
   if (direction) {
     classObject[(classes as any)[`direction${pascalCase(direction)}`]] = true;
   }
 
-  const rootClassNames: string = cn(classes.root, className, {
-    [classes.inline]: inline === true,
-  });
+  const rootClassNames: string = cn(classes.root, className);
   const flexClassNames: string = cn(classes.flex, classObject);
 
   // text nodes can't be modified with css, so replace them with spans.

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

@@ -1,3 +1,2 @@
 .root {
-  width: 100%;
 }