From 01af3e8c36df2b760877637d14cb7816260486a5 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Tue, 7 Nov 2017 22:02:07 -0800
Subject: [PATCH] CSS fixes

---
 app/components/Button/Button.js               | 28 ++++--------------
 app/components/Input/Input.js                 |  4 +--
 app/components/Labeled/Labeled.js             |  4 +--
 app/components/Labeled/index.js               |  3 +-
 .../Layout/components/SidebarLink.js          |  2 +-
 app/components/Modal/Modal.js                 |  4 +++
 app/scenes/Settings/Settings.js               | 29 +++++++++++++++----
 7 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/app/components/Button/Button.js b/app/components/Button/Button.js
index 411031e4..7ab5581f 100644
--- a/app/components/Button/Button.js
+++ b/app/components/Button/Button.js
@@ -7,17 +7,17 @@ import { darken, lighten } from 'polished';
 const RealButton = styled.button`
   display: inline-block;
   margin: 0;
-  padding: 0;
+  padding: 4px 12px;
   border: 0;
   background: ${color.primary};
   color: ${color.white};
   border-radius: 4px;
   font-size: 15px;
-  min-width: 32px;
-  min-height: 32px;
+  height: 36px;
   text-decoration: none;
   flex-shrink: 0;
   outline: none;
+  cursor: pointer;
 
   &::-moz-focus-inner {
     padding: 0;
@@ -70,24 +70,9 @@ const Label = styled.span`
   ${props => props.hasIcon && 'padding-left: 2px;'}
 `;
 
-const Inner = styled.span`
-  padding: 4px 16px;
-  display: flex;
-  line-height: 28px;
-  justify-content: center;
-  align-items: center;
-
-  ${props => props.small && `
-    padding: 1px 10px;
-  `}
-
-  ${props => props.hasIcon && (props.small ? 'padding-left: 6px;' : 'padding-left: 10px;')}
-`;
-
 export type Props = {
   type?: string,
   value?: string,
-  small?: boolean,
   icon?: React$Element<any>,
   className?: string,
   children?: React$Element<any>,
@@ -97,7 +82,6 @@ export default function Button({
   type = 'text',
   icon,
   children,
-  small,
   value,
   ...rest
 }: Props) {
@@ -106,10 +90,8 @@ export default function Button({
 
   return (
     <RealButton {...rest}>
-      <Inner hasIcon={hasIcon} small={small}>
-        {hasIcon && icon}
-        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-      </Inner>
+      {hasIcon && icon}
+      {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
     </RealButton>
   );
 }
diff --git a/app/components/Input/Input.js b/app/components/Input/Input.js
index 7897b3b3..38a552dc 100644
--- a/app/components/Input/Input.js
+++ b/app/components/Input/Input.js
@@ -60,11 +60,11 @@ export type Props = {
   className?: string,
 };
 
-export default function Input({ type, label, ...rest }: Props) {
+export default function Input({ type, label, className, ...rest }: Props) {
   const InputComponent = type === 'textarea' ? RealTextarea : RealInput;
 
   return (
-    <Wrapper>
+    <Wrapper className={className}>
       <label>
         {label && <LabelText>{label}</LabelText>}
         <Outline>
diff --git a/app/components/Labeled/Labeled.js b/app/components/Labeled/Labeled.js
index ec9e2f8f..72909be4 100644
--- a/app/components/Labeled/Labeled.js
+++ b/app/components/Labeled/Labeled.js
@@ -12,12 +12,12 @@ type Props = {
 
 const Labeled = ({ label, children, ...props }: Props) => (
   <Flex column {...props}>
-    <Header>{label}</Header>
+    <Label>{label}</Label>
     {children}
   </Flex>
 );
 
-const Header = styled(Flex)`
+export const Label = styled(Flex)`
   margin-bottom: ${size.medium};  
   font-size: 13px;
   font-weight: 500;
diff --git a/app/components/Labeled/index.js b/app/components/Labeled/index.js
index 544f6a7b..c68dffec 100644
--- a/app/components/Labeled/index.js
+++ b/app/components/Labeled/index.js
@@ -1,3 +1,4 @@
 // @flow
-import Labeled from './Labeled';
+import Labeled, { Label } from './Labeled';
 export default Labeled;
+export { Label };
diff --git a/app/components/Layout/components/SidebarLink.js b/app/components/Layout/components/SidebarLink.js
index 58ba5a32..3171b3da 100644
--- a/app/components/Layout/components/SidebarLink.js
+++ b/app/components/Layout/components/SidebarLink.js
@@ -10,7 +10,7 @@ import CollapsedIcon from 'components/Icon/CollapsedIcon';
 
 const activeStyle = {
   color: color.black,
-  fontWeight: fontWeight.semiBold,
+  fontWeight: fontWeight.medium,
 };
 
 const StyledGoTo = styled(CollapsedIcon)`
diff --git a/app/components/Modal/Modal.js b/app/components/Modal/Modal.js
index 105f6229..3e5fcbb2 100644
--- a/app/components/Modal/Modal.js
+++ b/app/components/Modal/Modal.js
@@ -16,6 +16,10 @@ type Props = {
 };
 
 injectGlobal`
+  .ReactModal__Overlay {
+    z-index: 100;
+  }
+
   .ReactModal__Body--open {
     overflow: hidden;
   }
diff --git a/app/scenes/Settings/Settings.js b/app/scenes/Settings/Settings.js
index 7b3a0228..2b04180a 100644
--- a/app/scenes/Settings/Settings.js
+++ b/app/scenes/Settings/Settings.js
@@ -11,6 +11,7 @@ import Flex from 'shared/components/Flex';
 import Button from 'components/Button';
 import Input from 'components/Input';
 import HelpText from 'components/HelpText';
+import { Label } from 'components/Labeled';
 import SlackAuthLink from 'components/SlackAuthLink';
 
 @observer class Settings extends React.Component {
@@ -28,10 +29,10 @@ import SlackAuthLink from 'components/SlackAuthLink';
       <Flex column>
         {showSlackSettings &&
           <Section>
-            <h2>Slack</h2>
+            <SectionLabel>Slack</SectionLabel>
             <HelpText>
               Connect Atlas to your Slack to instantly search for your documents
-              using <code>/atlas</code> command.
+              using <Code>/atlas</Code> command.
             </HelpText>
 
             <SlackAuthLink
@@ -49,7 +50,7 @@ import SlackAuthLink from 'components/SlackAuthLink';
           </Section>}
 
         <Section>
-          <h2>API access</h2>
+          <SectionLabel>API Access</SectionLabel>
           <HelpText>
             Create API tokens to hack on your Atlas.
             Learn more in <Link to="/developers">API documentation</Link>.
@@ -130,14 +131,14 @@ class InlineForm extends React.Component {
     return (
       <form onSubmit={this.handleSubmit}>
         <Flex auto>
-          <Input
+          <ApiKeyInput
             type="text"
             placeholder={validationError ? 'Please add a label' : placeholder}
             value={value || ''}
             onChange={onChange}
             validationError={validationError}
           />
-          <Button type="submit" value={buttonLabel} />
+          <Button type="submit" value={buttonLabel} size="small" />
         </Flex>
       </form>
     );
@@ -158,4 +159,22 @@ const Table = styled.table`
   }
 `;
 
+const SectionLabel = styled(Label)`
+  padding-bottom: 12px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #EAEBEA;
+`;
+
+const Code = styled.code`
+  padding: 4px 6px;
+  margin: 0 2px;
+  background: #EAEBEA;
+  border-radius: 4px;
+`;
+
+const ApiKeyInput = styled(Input)`
+  width: 100%;
+  margin-right: 12px;
+`;
+
 export default Settings;