Connect: Adjust to the light theme (#27080)

* Adjust Connect to light theme * Remove `clusters/*` element * Add terminal colors * Remove warning about using `false` as `color` * Add custom styling for `Toggle` * Fix light theme for file transfer, use the same border color for the drop area as for the input * Do not hardcode color in `CliCommand` * Use #000 as black * Convert rgba colors to be non-opaque * Fix two slightly incorrect colors
gravitational · Jun 5, 2023 · ed2bb4b · ed2bb4b
1 parent 8464dc2
commit ed2bb4b
Show file tree

Hide file tree

Showing 29 changed files with 312 additions and 226 deletions.
diff --git a/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx b/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx
@@ -56,10 +56,7 @@ const ChildWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${props =>
-    props.theme.name === 'dark'
-      ? props.theme.colors.spotBackground[0]
-      : props.theme.colors.spotBackground[0]};
+  background: ${props => props.theme.colors.spotBackground[0]};
   border-radius: 200px;
 `;
 

diff --git a/web/packages/design/src/DataTable/index.ts b/web/packages/design/src/DataTable/index.ts
@@ -22,7 +22,15 @@ import {
   LabelCell,
   ClickableLabelCell,
 } from './Cells';
-import { StyledPanel } from './StyledTable';
+import { StyledPanel, StyledTableWrapper } from './StyledTable';
 
-export { Cell, TextCell, DateCell, LabelCell, ClickableLabelCell, StyledPanel };
+export {
+  Cell,
+  TextCell,
+  DateCell,
+  LabelCell,
+  ClickableLabelCell,
+  StyledPanel,
+  StyledTableWrapper,
+};
 export default Table;
diff --git a/web/packages/design/src/theme/darkTheme.ts b/web/packages/design/src/theme/darkTheme.ts
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { fonts } from './fonts';
-import { getContrastRatio } from './utils/colorManipulator';
+import { getContrastRatio, lighten } from './utils/colorManipulator';
 import { lightBlue, blueGrey, yellow } from './palette';
 import typography, { fontSizes, fontWeights } from './typography';
 import { sharedStyles } from './sharedStyles';
@@ -144,6 +144,30 @@ const colors = {
     disabledBackground: 'rgba(255, 255, 255, 0.12)',
   },
 
+  terminal: {
+    foreground: '#F1F2F4',
+    background: '#010B1C', // bgTerminal
+    selectionBackground: 'rgba(255, 255, 255, 0.18)',
+    cursor: '#FFF',
+    cursorAccent: '#010B1C',
+    red: '#FF6257',
+    green: '#00BFA6',
+    yellow: '#FFAB00',
+    blue: '#009EFF',
+    magenta: '#9F85FF',
+    cyan: '#00D3F0',
+    brightWhite: lighten('#010B1C', 0.89),
+    white: lighten('#010B1C', 0.78),
+    brightBlack: lighten('#010B1C', 0.61),
+    black: '#000',
+    brightRed: '#FF948D',
+    brightGreen: '#2EFFD5',
+    brightYellow: '#FFD98C',
+    brightBlue: '#7BCDFF',
+    brightMagenta: '#B9A6FF',
+    brightCyan: '#74EEFF',
+  },
+
   subtle: blueGrey[50],
   link: '#009EFF',
   bgTerminal: '#010B1C',

diff --git a/web/packages/design/src/theme/lightTheme.ts b/web/packages/design/src/theme/lightTheme.ts
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { fonts } from './fonts';
-import { getContrastRatio } from './utils/colorManipulator';
+import { darken, getContrastRatio } from './utils/colorManipulator';
 import { lightBlue, blueGrey, yellow } from './palette';
 import typography, { fontSizes, fontWeights } from './typography';
 import { sharedStyles } from './sharedStyles';
@@ -140,6 +140,30 @@ const colors = {
     disabledBackground: 'rgba(255, 255, 255, 0.12)',
   },
 
+  terminal: {
+    foreground: '#000',
+    background: '#F1F2F4', // levels.sunken
+    selectionBackground: 'rgba(0, 0, 0, 0.18)',
+    cursor: '#000',
+    cursorAccent: '#F1F2F4',
+    red: '#9D0A00',
+    green: '#005742',
+    yellow: '#704B00',
+    blue: '#004B89',
+    magenta: '#3D1BB2',
+    cyan: '#015C6E',
+    brightWhite: darken('#F1F2F4', 0.55),
+    white: darken('#F1F2F4', 0.68),
+    brightBlack: darken('#F1F2F4', 0.8),
+    black: '#000',
+    brightRed: '#BF372E',
+    brightGreen: '#007562',
+    brightYellow: '#8F5F00',
+    brightBlue: '#006BB8',
+    brightMagenta: '#5531D4',
+    brightCyan: '#007282',
+  },
+
   subtle: blueGrey[50],
   link: '#0073BA',
   bgTerminal: '#010B1C',

diff --git a/web/packages/shared/components/FileTransfer/FileTransferStateless/CommonElements.tsx b/web/packages/shared/components/FileTransfer/FileTransferStateless/CommonElements.tsx
@@ -56,10 +56,6 @@ export const PathInput = forwardRef<
 
 const StyledFieldInput = styled(FieldInput)`
   input {
-    border: 1px solid ${props => props.theme.colors.text.muted};
-    background: transparent;
-    color: white;
-    box-shadow: none;
     font-size: 14px;
     height: 32px;
   }

diff --git a/web/packages/shared/components/FileTransfer/FileTransferStateless/UploadForm/UploadForm.tsx b/web/packages/shared/components/FileTransfer/FileTransferStateless/UploadForm/UploadForm.tsx
@@ -127,7 +127,7 @@ const Dropzone = styled.button`
   color: inherit;
   background-color: ${props => props.theme.colors.spotBackground[0]};
   margin-top: ${props => props.theme.space[3]}px;
-  border: 1px dashed ${props => props.theme.colors.spotBackground[1]};
+  border: 1px dashed ${props => props.theme.colors.text.muted};
   height: 128px;
   text-align: center;
   cursor: pointer;

diff --git a/web/packages/teleport/src/components/Toggle/Toggle.tsx b/web/packages/teleport/src/components/Toggle/Toggle.tsx
@@ -22,9 +22,10 @@ export default function Toggle({
   onToggle,
   children,
   disabled,
+  className,
 }: Props) {
   return (
-    <StyledWrapper disabled={disabled}>
+    <StyledWrapper disabled={disabled} className={className}>
       <StyledInput
         checked={isToggled}
         onChange={onToggle}
@@ -41,6 +42,7 @@ type Props = {
   onToggle: () => void;
   children?: ReactNode;
   disabled?: boolean;
+  className?: string;
 };
 
 const StyledWrapper = styled.label`

diff --git a/web/packages/teleterm/src/ui/DocumentCluster/ClusterNavButton/ClusterNavButton.tsx b/web/packages/teleterm/src/ui/DocumentCluster/ClusterNavButton/ClusterNavButton.tsx
@@ -48,7 +48,7 @@ export type NavButtonProps = {
 const StyledNavButton = styled.button(props => {
   return {
     color: props.active
-      ? props.theme.colors.light
+      ? props.theme.colors.text.main
       : props.theme.colors.text.slightlyMuted,
     cursor: 'pointer',
     fontFamily: 'inherit',

diff --git a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterResources.tsx b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterResources.tsx
@@ -40,7 +40,7 @@ export default function ClusterResources() {
 
   return (
     <StyledMain>
-      <Flex mt={3} pb={5} flexDirection="column">
+      <Flex pb={5} flexDirection="column">
         <SideNav mb={2} />
         <HorizontalSplit>
           {clusterCtx.isLocationActive('/resources/servers') && <Servers />}

diff --git a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Databases/Databases.tsx b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Databases/Databases.tsx
@@ -14,7 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
-import Table, { Cell, ClickableLabelCell } from 'design/DataTable';
+import Table, {
+  Cell,
+  ClickableLabelCell,
+  StyledTableWrapper,
+} from 'design/DataTable';
 import { Danger } from 'design/Alert';
 import { MenuLogin, MenuLoginProps } from 'shared/components/MenuLogin';
 import { SearchPanel, SearchPagination } from 'shared/components/Search';
@@ -58,59 +62,61 @@ function DatabaseList(props: State) {
       {fetchAttempt.status === 'error' && (
         <Danger>{fetchAttempt.statusText}</Danger>
       )}
-      <SearchPanel
-        updateQuery={updateQuery}
-        updateSearch={updateSearch}
-        pageIndicators={pageCount}
-        filter={agentFilter}
-        showSearchBar={true}
-        disableSearch={disabled}
-      />
-      <DarkenWhileDisabled disabled={disabled}>
-        <Table
-          data={dbs}
-          columns={[
-            {
-              key: 'name',
-              headerText: 'Name',
-              isSortable: true,
-            },
-            {
-              key: 'description',
-              headerText: 'Description',
-              isSortable: true,
-            },
-            {
-              key: 'type',
-              headerText: 'Type',
-              isSortable: true,
-            },
-            {
-              key: 'labels',
-              headerText: 'Labels',
-              render: ({ labels }) => (
-                <ClickableLabelCell
-                  labels={labels}
-                  onClick={onAgentLabelClick}
-                />
-              ),
-            },
-            {
-              altKey: 'connect-btn',
-              render: db => (
-                <ConnectButton
-                  dbUri={db.uri}
-                  protocol={db.protocol as GatewayProtocol}
-                  onConnect={dbUser => connect(db, dbUser)}
-                />
-              ),
-            },
-          ]}
-          customSort={customSort}
-          emptyText={emptyText}
+      <StyledTableWrapper borderRadius={3}>
+        <SearchPanel
+          updateQuery={updateQuery}
+          updateSearch={updateSearch}
+          pageIndicators={pageCount}
+          filter={agentFilter}
+          showSearchBar={true}
+          disableSearch={disabled}
         />
-        <SearchPagination prevPage={prevPage} nextPage={nextPage} />
-      </DarkenWhileDisabled>
+        <DarkenWhileDisabled disabled={disabled}>
+          <Table
+            data={dbs}
+            columns={[
+              {
+                key: 'name',
+                headerText: 'Name',
+                isSortable: true,
+              },
+              {
+                key: 'description',
+                headerText: 'Description',
+                isSortable: true,
+              },
+              {
+                key: 'type',
+                headerText: 'Type',
+                isSortable: true,
+              },
+              {
+                key: 'labels',
+                headerText: 'Labels',
+                render: ({ labels }) => (
+                  <ClickableLabelCell
+                    labels={labels}
+                    onClick={onAgentLabelClick}
+                  />
+                ),
+              },
+              {
+                altKey: 'connect-btn',
+                render: db => (
+                  <ConnectButton
+                    dbUri={db.uri}
+                    protocol={db.protocol as GatewayProtocol}
+                    onConnect={dbUser => connect(db, dbUser)}
+                  />
+                ),
+              },
+            ]}
+            customSort={customSort}
+            emptyText={emptyText}
+          />
+          <SearchPagination prevPage={prevPage} nextPage={nextPage} />
+        </DarkenWhileDisabled>
+      </StyledTableWrapper>
     </>
   );
 }

diff --git a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Kubes/Kubes.tsx b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Kubes/Kubes.tsx
@@ -15,7 +15,11 @@ limitations under the License.
 */
 
 import React from 'react';
-import Table, { Cell, ClickableLabelCell } from 'design/DataTable';
+import Table, {
+  Cell,
+  ClickableLabelCell,
+  StyledTableWrapper,
+} from 'design/DataTable';
 import { ButtonBorder } from 'design';
 import { Danger } from 'design/Alert';
 import { SearchPanel, SearchPagination } from 'shared/components/Search';
@@ -54,43 +58,45 @@ function KubeList(props: State) {
       {fetchAttempt.status === 'error' && (
         <Danger>{fetchAttempt.statusText}</Danger>
       )}
-      <SearchPanel
-        updateQuery={updateQuery}
-        updateSearch={updateSearch}
-        pageIndicators={pageCount}
-        filter={agentFilter}
-        showSearchBar={true}
-        disableSearch={disabled}
-      />
-      <DarkenWhileDisabled disabled={disabled}>
-        <Table
-          data={kubes}
-          columns={[
-            {
-              key: 'name',
-              headerText: 'Name',
-              isSortable: true,
-            },
-            {
-              key: 'labels',
-              headerText: 'Labels',
-              render: ({ labels }) => (
-                <ClickableLabelCell
-                  labels={labels}
-                  onClick={onAgentLabelClick}
-                />
-              ),
-            },
-            {
-              altKey: 'connect-btn',
-              render: kube => renderConnectButtonCell(kube.uri, connect),
-            },
-          ]}
-          customSort={customSort}
-          emptyText={emptyText}
+      <StyledTableWrapper borderRadius={3}>
+        <SearchPanel
+          updateQuery={updateQuery}
+          updateSearch={updateSearch}
+          pageIndicators={pageCount}
+          filter={agentFilter}
+          showSearchBar={true}
+          disableSearch={disabled}
         />
-        <SearchPagination prevPage={prevPage} nextPage={nextPage} />
-      </DarkenWhileDisabled>
+        <DarkenWhileDisabled disabled={disabled}>
+          <Table
+            data={kubes}
+            columns={[
+              {
+                key: 'name',
+                headerText: 'Name',
+                isSortable: true,
+              },
+              {
+                key: 'labels',
+                headerText: 'Labels',
+                render: ({ labels }) => (
+                  <ClickableLabelCell
+                    labels={labels}
+                    onClick={onAgentLabelClick}
+                  />
+                ),
+              },
+              {
+                altKey: 'connect-btn',
+                render: kube => renderConnectButtonCell(kube.uri, connect),
+              },
+            ]}
+            customSort={customSort}
+            emptyText={emptyText}
+          />
+          <SearchPagination prevPage={prevPage} nextPage={nextPage} />
+        </DarkenWhileDisabled>
+      </StyledTableWrapper>
     </>
   );
 }