fix(css): Match date and mode selector styles to trimet-mod-otp

opentripplanner · May 15, 2020 · 404f941 · 404f941
1 parent 4206465
commit 404f941
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 87 deletions.
diff --git a/lib/components/form/connected-settings-selector-panel.js b/lib/components/form/connected-settings-selector-panel.js
@@ -30,7 +30,6 @@ class ConnectedSettingsSelectorPanel extends Component {
           {showUserSettings && <UserTripSettings />}
 
           <StyledSettingsSelectorPanel
-            className='settings-selector-panel'
             ModeIcon={ModeIcon}
             queryParams={query}
             supportedModes={config.modes}

diff --git a/lib/components/form/styled.js b/lib/components/form/styled.js
@@ -7,178 +7,188 @@ const commonButtonCss = css`
   -moz-user-select: none;
   -ms-user-select: none;
   background: none;
+  border: 1px solid rgb(187, 187, 187);
+  border-radius: 3px;
   font-family: inherit;
-  user-select: none;
+  font-size: inherit;
+  font-weight: inherit;
+  outline-offset: -2px;
+  padding: 6px 12px;
   text-align: center;
   touch-action: manipulation;
+  user-select: none;
+
+  &.active {
+    background-color: rgb(173, 216, 230);
+    border: 2px solid rgb(0, 0, 0);
+    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    font-weight: 600;
+  }
 `
 
 const commonInputCss = css`
-  background-color: #fff;
+  background: none;
   border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   color: #555;
   font-family: inherit;
+  font-weight: inherit;
   padding: 6px 12px;
-  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
-
-  &:focus {
-    border-color: #66afe9;
-    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
-    outline: 0;
-  }
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 `
 
 const modeButtonButtonCss = css`
   ${TripFormClasses.ModeButton.Button} {
     ${commonButtonCss}
-    background-color: #fff;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    color: #333;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 1.42857143;
-    outline-offset:-2px;
-    padding: 6px 12px;
-    &.active {
-      background-color: #e6e6e6;
-      border-color: #adadad;
-      box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-      font-weight: 400;
-    }
-    &:hover {
-      background-color: #e6e6e6;
-      border-color: #adadad;
-    }
-    &.active {
-      background-color: #e6e6e6;
-      border-color: #adadad;
-      box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-      font-weight: 400;
-      &:hover {
-        background-color: #d4d4d4;
-        border-color: #8c8c8c;
-      }
-    }
   }
 `
 
 export const StyledSettingsSelectorPanel = styled(SettingsSelectorPanel)`
+  ${modeButtonButtonCss}
+
   ${TripFormClasses.SettingLabel} {
-    font-weight: 400;
-    margin-bottom: 0;
+    color: #808080;
+    font-size: 14px;
+    font-weight: 100;
+    letter-spacing: 1px;
+    padding-top: 8px;
+    text-transform: uppercase;
   }
   ${TripFormClasses.SettingsHeader} {
+    color: #333333;
     font-size: 18px;
-    margin: 16px 0px;    
+    margin: 16px 0px;
   }
   ${TripFormClasses.SettingsSection} {
     margin-bottom: 16px;
   }
   ${TripFormClasses.DropdownSelector} {
-    margin-bottom:20px;
     select {
       ${commonInputCss}
+      -webkit-appearance: none;
+      border-radius: 3px;
       font-size: 14px;
       height: 34px;
-      line-height: 1.42857143;
+      line-height: 1.42857;
+      margin-bottom: 20px;
+
+      &:focus {
+        border-color: #66afe9;
+        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
+        outline: 0;
+      }
+    }
+    > div:last-child::after {
+      box-sizing: border-box;
+      color: #000;
+      content: "▼";
+      font-size: 67%;
+      pointer-events: none;
+      position: absolute;
+      right: 8px;
+      top: 10px;
     }
   }
 
   ${TripFormClasses.ModeSelector} {
+    font-weight: 300;
     ${TripFormClasses.ModeButton.Button} {
-      ${commonButtonCss}
-      border: 1px solid rgb(187, 187, 187);
-      border-radius: 3px;
       box-shadow: none;
-      outline: 0;
+      outline: none;
       padding: 3px;
-      &.active {
-        background-color: rgb(173, 216, 230);
-        border: 2px solid rgb(0, 0, 0);
-      }
-    }
+    }  
     ${TripFormClasses.ModeButton.Title} {
       font-size: 10px;
-      font-weight: 300;
       line-height: 12px;
       padding: 4px 0px 0px;
+  
       &.active {
         font-weight: 600;
       }
-    }
+    }  
   }
   ${TripFormClasses.ModeSelector.MainRow} {
-    margin: 0 -10px 18px;
-    padding: 0 5px;
-    
+    box-sizing: border-box;
+    font-size: 170%;
+    margin: 0px -15px 18px;
+    padding: 0px 5px;
     ${TripFormClasses.ModeButton.Button} {
-      font-size: 200%;
-      font-weight: 300;
       height: 54px;
+      width: 100%;
       &.active {
         font-weight: 600;
       }  
     }
   }
   ${TripFormClasses.ModeSelector.SecondaryRow} {
-    margin: 0 -10px 10px;
+    margin: 0px -15px 10px;
     ${TripFormClasses.ModeButton.Button} {
-      font-size: 150%;
-      font-weight: 600;
+      font-size: 130%;
+      font-weight: 800;
       height: 46px;
+      > svg {
+        margin: 0 0.20em;
+      }
     }
   }
   ${TripFormClasses.ModeSelector.TertiaryRow} {
-    margin: 0 -10px 10px;
+    font-size: 80%;
+    font-weight: 300;
+    margin: 0px -15px 10px;
+    text-align: center;
     ${TripFormClasses.ModeButton.Button} {
-      font-size: 90%;
       height: 36px;
     }
   }
-
   ${TripFormClasses.SubmodeSelector.Row} {
+    font-size: 12px;
     > * {
       padding: 3px 5px 3px 0px;
     }
     > :last-child {
       padding-right: 0px;
     }
     ${TripFormClasses.ModeButton.Button} {
-      padding: 6px 12px;
+      height: 35px;
     }
     svg,
     img {
       margin-left: 0px;
     }
   }
+  ${TripFormClasses.SubmodeSelector} {
+    ${TripFormClasses.SettingLabel} {
+      margin-bottom: 0;
+    }
+  }
   ${TripFormClasses.SubmodeSelector.InlineRow} {
     margin: -3px 0px;
-  }
-
-  ${TripFormClasses.SubmodeSelector} {
-      ${modeButtonButtonCss}
+    svg,
+    img {
+      height: 18px;
+      max-width: 32px;
+    }
   }
 `
 
 export const StyledDateTimeSelector = styled(DateTimeSelector)`
-  margin: 0 -15px 20px;
+  margin: 0 -15px 15px;
+
   ${TripFormClasses.DateTimeSelector.DateTimeRow} {
-    margin-top: 20px;
+    margin: 20px 0px 15px;
+    input {
+      ${commonInputCss}
+      background-color: #fff;
+      border: 0;
+      border-bottom: 1px solid #000;
+      box-shadow: none;
+      outline: none;
+      text-align: center;
+    }
   }
-
-  input {
-    ${commonInputCss}
-    -webkit-appearance: textfield;
-    -moz-appearance: textfield;
-    appearance: textfield;
-    box-shadow: none;
-    font-size: 16px;
-    height: 34px;
-    text-align: center; /* For legacy browsers. */
+  ${TripFormClasses.ModeButton.Button} {
+    ${commonButtonCss}
+    font-size: 14px;
+    height: 35px;
   }
-
-  ${modeButtonButtonCss}
 `