Tweaks/UI (#877)

* fixed typo

* tweaked Badge appearance

* removed table border-radius, added dev script

* wrap table columns to cater to unusually long non-breaking words (if present)

* fixed version in dev script

* Cleanup for Themer

---------

Co-authored-by: Aswin V <[email protected]>

dev.sh

@@ -0,0 +1,12 @@
+#!/bin/sh
+VERSION=3.3.34
+npm run cleanup:mitosis-out && npm run build
+
+cd react
+npm unpublish --registry http://localhost:4873/ @boxyhq/react-ui@$VERSION
+npm publish --registry http://localhost:4873/
+
+cd ../..
+cd saas-app
+npm uninstall @boxyhq/react-ui && npm i --save-exact --registry http://localhost:4873/ @boxyhq/react-ui@$VERSION
+rm -rf .next

src/dsync/DirectoriesWrapper/index.lite.tsx

@@ -66,7 +66,7 @@ export default function DirectoriesWrapper(props: DirectoriesWrapperProps) {
       <Show when={state.view === 'LIST'}>
         <div class={styles.listview}>
           <div class={styles.header}>
-            <h5 class={styles.h5}>{props.title || 'Manage Dsync Connections'}</h5>
+            <h5 class={styles.h5}>{props.title || 'Manage DSync Connections'}</h5>
             <div class={styles.ctoa}>
               <Button
                 name='New Directory'

src/dsync/DirectoryList/index.module.css

@@ -1,4 +1,3 @@
 .tableContainer {
   border-width: 1px;
-  border-radius: 4px;
 }

src/shared/Badge/index.module.css

@@ -4,8 +4,7 @@
   display: inline-block;
   padding: 0.25rem 0.56rem;
   border-radius: 0.375rem;
-  color: var(--primary-color-950);
-  text-transform: uppercase;
+  color: white;
   font-size: 0.75rem;
   line-height: 0.75rem;
 }

src/shared/Table/index.module.css

@@ -29,6 +29,10 @@
   color: rgb(55 65 81);
 }
 
+.td {
+  word-break: break-all;
+}
+
 .th,
 .td {
   padding: 0.75rem 1.5rem;
@@ -56,5 +60,3 @@ tbody .tr:hover {
   display: inline-flex;
   align-items: baseline;
 }
-
-

src/shared/Themer/index.lite.tsx

@@ -1,14 +1,14 @@
 import { onUpdate } from '@builder.io/mitosis';
-import { THEME } from './defaultTheme';
+import type { Theme } from './types';
 
 interface ThemerProps {
-  overrideTheme?: Partial<typeof THEME>;
+  overrideTheme?: Partial<Theme>;
   children: any;
 }
 
 export default function Themer(props: ThemerProps) {
   onUpdate(() => {
-    Object.entries({ ...THEME, ...props.overrideTheme }).forEach(([cssVar, value]) => {
+    Object.entries({ ...props.overrideTheme }).forEach(([cssVar, value]) => {
       document.documentElement.style.setProperty(cssVar, value);
     });
   }, [props.overrideTheme]);

src/shared/Themer/types.ts

@@ -0,0 +1,34 @@
+export type Theme = {
+  '--primary-color': string;
+  '--primary-foreground-color': string;
+  '--primary-hover': string;
+  '--primary-active': string;
+  '--primary-disabled': string;
+  '--primary-color-50': string;
+  '--primary-color-100': string;
+  '--primary-color-200': string;
+  '--primary-color-300': string;
+  '--primary-color-500': string;
+  '--primary-color-600': string;
+  '--primary-color-700': string;
+  '--primary-color-800': string;
+  '--primary-color-900': string;
+  '--primary-color-950': string;
+  '--secondary-color': string;
+  /* --secondary-color: "#27272a",  dark mode */
+  '--primary-text-color': string;
+  /* --primary-text-color: #fafafa, dark mode */
+  '--primary-text-color-500': string;
+  '--ring-offset': string;
+  '--ring-offset-width': string;
+  '--ring-offset-color': string;
+  /* --ring-offset-color: hsl(240 10 3.9),  dark mode*/
+  '--ring-color': string;
+  /* --ring-color: hsl(240 4.9% 83.9%),  dark mode */
+  '--border-color': string;
+  '--border-width': string;
+  '--border-radius': string;
+  '--alert-color-success': string;
+  '--alert-color-info': string;
+  '--alert-color-warning': string;
+};

src/sso/connections/ConnectionList/index.module.css

@@ -1,4 +1,3 @@
 .tableContainer {
   border-width: 1px;
-  border-radius: 4px;
 }