✨ feat: add react layout

src/components/DraggablePanel/style.ts

@@ -1,4 +1,5 @@
 import { createStyles, css, cx } from 'antd-style'
+import { rgba } from 'polished'
 
 export const useStyle = createStyles(({ token }, prefix: string) => {
   const commonHandle = css`
@@ -112,7 +113,8 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
     fixed: cx(
       `${prefix}-fixed`,
       css`
-        background: ${token.colorBgContainer};
+        background: ${rgba(token.colorBgContainer, 0.75)};
+        backdrop-filter: blur(40px);
         overflow: hidden;
       `
     ),
@@ -121,7 +123,8 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
       css`
         overflow: hidden;
         border-radius: 8px;
-        background: ${token.colorBgElevated};
+        background: ${rgba(token.colorBgElevated, 0.75)};
+        backdrop-filter: blur(40px);
         box-shadow: ${token.boxShadowSecondary};
         z-index: 2000;
       `

src/components/Header/index.tsx

@@ -1,16 +1,51 @@
-import React from 'react'
+import { GithubOutlined } from '@ant-design/icons'
+import { Button, Space } from 'antd'
+import { rgba } from 'polished'
+import qs from 'query-string'
+import React, { useCallback } from 'react'
 import styled from 'styled-components'
 import Logo from './Logo'
+import { themeIcon } from './style'
 
 const HeaderView = styled.div`
-  height: 46px;
   padding: 16px 24px;
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: space-between;
-  background: ${({ theme }) => theme.colorBgContainer};
+  background: ${({ theme }) => rgba(theme.colorBgContainer, 0.5)};
   border-bottom: 1px solid ${({ theme }) => theme.colorBorderSecondary};
+  backdrop-filter: blur(40px);
+  #header {
+    .tab-nav {
+      border: none !important;
+      margin: 0 !important;
+    }
+    button {
+      cursor: pointer;
+      border: none !important;
+      background: transparent !important;
+      flex: none;
+      transition: all 0.2s ease-in-out;
+      padding: 8px !important;
+      border-radius: 4px !important;
+      margin: 0 !important;
+      flex: 0 !important;
+      &:hover {
+        border: none !important;
+        color: var(--color-text) !important;
+        background: var(--color-fill-tertiary) !important;
+        flex: none;
+      }
+      &.selected {
+        border: none !important;
+        background: transparent !important;
+        color: var(--color-text) !important;
+        flex: none;
+        font-weight: 600;
+      }
+    }
+  }
 `
 
 interface HeaderProps {
@@ -19,10 +54,23 @@ interface HeaderProps {
 }
 
 const Header: React.FC<HeaderProps> = ({ children, themeMode }) => {
+  const handleSetTheme = useCallback(() => {
+    const theme = themeMode === 'light' ? 'dark' : 'light'
+    const gradioURL = qs.parseUrl(window.location.href)
+    gradioURL.query.__theme = theme
+    window.location.replace(qs.stringifyUrl(gradioURL))
+  }, [themeMode])
+
   return (
-    <HeaderView className="gradio-container-3-23-0">
-      <Logo themeMode={themeMode} />
+    <HeaderView>
+      <Logo themeMode={themeMode} style={{ paddingRight: 16 }} />
       {children}
+      <Space.Compact>
+        <a href="https://github.com/canisminor1990/sd-web-ui-kitchen-theme" target="_blank">
+          <Button icon={<GithubOutlined />} />
+        </a>
+        <Button icon={themeIcon[themeMode]} onClick={handleSetTheme} />
+      </Space.Compact>
     </HeaderView>
   )
 }

src/components/Sidebar/index.tsx

@@ -0,0 +1,49 @@
+import { DraggablePanel } from '@/components'
+import React from 'react'
+import styled from 'styled-components'
+
+const SidebarView = styled.div`
+  padding: 16px;
+  #quicksettings {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: stretch;
+
+    > * {
+      flex: 1;
+      max-width: unset !important;
+      min-width: unset !important;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+    }
+
+    span {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+    }
+
+    .dropdown-arrow {
+      min-width: 16px;
+      min-height: 16px;
+    }
+  }
+`
+
+interface SidebarProps {
+  children: React.ReactNode
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ children }) => {
+  return (
+    <DraggablePanel placement="right" defaultSize={{ width: 280 }}>
+      <SidebarView>{children}</SidebarView>
+    </DraggablePanel>
+  )
+}
+
+export default React.memo(Sidebar)

src/components/index.tsx

@@ -1,2 +1,3 @@
 export * from './DraggablePanel'
 export { default as Header } from './Header'
+export { default as Sidebar } from './Sidebar'

src/pages/index/App.tsx

@@ -1,4 +1,4 @@
-import { DraggablePanel, Header } from '@/components'
+import { Header, Sidebar } from '@/components'
 import React, { useEffect, useRef } from 'react'
 import styled from 'styled-components'
 
@@ -23,10 +23,6 @@ const Content = styled.div`
   flex: 1;
 `
 
-const Sidebar = styled.div`
-  padding: 16px;
-`
-
 interface AppProps {
   themeMode: 'light' | 'dark'
 }
@@ -56,9 +52,9 @@ const App: React.FC<AppProps> = ({ themeMode }) => {
           <div ref={mainRef} />
         </Content>
       </MainView>
-      <DraggablePanel placement="right">
-        <Sidebar ref={sidebarRef} />
-      </DraggablePanel>
+      <Sidebar>
+        <div ref={sidebarRef} />
+      </Sidebar>
     </View>
   )
 }

src/pages/index/index.tsx

@@ -11,9 +11,9 @@ import App from './App'
 
 const Root: React.FC = () => {
   setupStyled({ ThemeContext })
-  const [appearance, setAppearance] = useState<'light' | 'dark'>('dark')
+  const [appearance, setAppearance] = useState<'light' | 'dark'>('light')
   useEffect(() => {
-    const themeMode: any = String(qs.parseUrl(window.location.href).query.__theme) || 'dark'
+    const themeMode: any = String(qs.parseUrl(window.location.href).query.__theme) || 'light'
     setAppearance(themeMode)
     document.body.classList.add(themeMode)
   }, [])

src/theme/components/container.less

@@ -1,6 +1,48 @@
 .tabitem,
 .gradio-tabitem {
   background: var(--color-fill-quaternary);
+  border: none !important;
+  border-radius: var(--container-radius);
+  background: var(--panel-background-fill);
+  padding: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
+}
+
+#tabs {
+  > .tabitem,
+  > .gradio-tabitem {
+    background: transparent !important;
+    padding: 0 !important;
+  }
+}
+
+.tab-nav {
+  border: none !important;
+  gap: 8px;
+  margin-bottom: 8px;
+  button {
+    cursor: pointer;
+    border: none !important;
+    background: var(--color-fill-quaternary) !important;
+    flex: none;
+    transition: all 0.2s ease-in-out;
+    padding: 8px !important;
+    border-radius: 4px !important;
+    flex: 1 !important;
+    &:hover {
+      border: none !important;
+      color: var(--color-text) !important;
+      background: var(--color-fill-tertiary) !important;
+      flex: none;
+    }
+    &.selected {
+      border: none !important;
+      background: var(--color-fill-secondary) !important;
+      color: var(--color-text) !important;
+      flex: none;
+      font-weight: 600;
+    }
+  }
 }
 
 .selected.svelte-1g805jl {
@@ -10,4 +52,41 @@
 [id$='2img_tools'] > div {
   display: flex;
   justify-content: center;
+  button {
+    max-width: unset !important;
+  }
+}
+
+.image-buttons button {
+  min-width: min(160px,100%) !important;
+}
+
+#img2img_label_copy_to_img2img {
+  display: none;
+}
+
+#img2img_copy_to_img2img, .gap.compact, .image-buttons, .image_buttons_extras {
+  gap: 8px !important;
 }
+
+
+.padded.svelte-mppz8v {
+  padding: 6px;
+}
+
+.wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt {
+  gap: 8px !important;
+  > label  {
+    flex: 1 !important;
+    white-space: nowrap;
+    border-radius: var(--border-radius)!important;
+  }
+}
+
+[id$="_settings"] {
+  div.svelte-15lo0d8>*, div.svelte-15lo0d8>.form>* {
+    min-width: unset !important;
+    flex: 1;
+  }
+}
+

src/theme/components/options.less

@@ -2,9 +2,12 @@ ul.options {
   border: 2px solid var(--color-border) !important;
   border-radius: var(--border-radius) !important;
   display: block !important;
+  padding: 0 !important;
+  margin: 0 !important;
   background: var(--color-bg-elevated) !important;
   li {
     display: block !important;
+    margin: 0 !important;
     &.selected {
       background: var(--color-primary) !important;
       color: #fff !important;

src/theme/components/prose.less

@@ -0,0 +1,8 @@
+.prose {
+	> p {
+		border: var(--input-border-width) solid var(--color-primary-border);
+		border-radius: var(--input-radius);
+		background: var(--color-primary-bg);
+		padding: 12px;
+	}
+}

src/theme/components/scrollbar.less

@@ -1,7 +1,7 @@
 /* width */
 ::-webkit-scrollbar {
-  width: 2px;
-  height: 2px;
+  width: 0;
+  height: 0;
 }
 
 /* Track */

src/theme/components/sliders.less

@@ -96,3 +96,7 @@ input[type='range'] {
     background: var(--color-bg-elevated) !important;
   }
 }
+
+.gradio-slider input[type="number"] {
+padding: var(--spacing-sm) !important;
+}