From 3acdebfa377c6a971dd2266f1a2b65ffe6da1d44 Mon Sep 17 00:00:00 2001
From: wataru <wataru@fdev.local.com>
Date: Sat, 14 Jan 2023 17:58:57 +0900
Subject: [PATCH] design update

---
 client/demo/src/000_index.tsx          | 17 ++++++-
 client/demo/src/101_server_setting.tsx |  6 ++-
 client/demo/src/css/App.css            | 61 +++++++++++++++++++++++---
 3 files changed, 77 insertions(+), 7 deletions(-)

diff --git a/client/demo/src/000_index.tsx b/client/demo/src/000_index.tsx
index df326b80..4254a984 100644
--- a/client/demo/src/000_index.tsx
+++ b/client/demo/src/000_index.tsx
@@ -37,10 +37,25 @@ const App = () => {
 
     return (
         <div className="body">
-            <div className="body-row">
+            <div className="body-row split-6-4">
                 <div className="body-top-title">
                     Voice Changer Setting
                 </div>
+                <div className="body-top-title-belongings">
+                    <div className="belonging-item">
+                        <a className="link" href="https://github.com/w-okada/voice-changer" target="_blank" rel="noopener noreferrer">
+                            <img src="./assets/icons/github.svg" />
+                            <span>github</span>
+                        </a>
+                    </div>
+                    <div className="belonging-item">
+                        <a className="link" href="https://zenn.dev/wok/articles/s01_vc001_top" target="_blank" rel="noopener noreferrer">
+                            <img src="./assets/icons/help-circle.svg" />
+                            <span>manual</span>
+                        </a>
+                    </div>
+
+                </div>
             </div>
             {clearRow}
             {voiceChangerSetting}
diff --git a/client/demo/src/101_server_setting.tsx b/client/demo/src/101_server_setting.tsx
index 395c3e61..4287346d 100644
--- a/client/demo/src/101_server_setting.tsx
+++ b/client/demo/src/101_server_setting.tsx
@@ -68,6 +68,10 @@ export const useServerSettingArea = (props: UseServerSettingProps): ServerSettin
             props.clientState.serverSetting.loadModel()
         }
 
+        const uploadButtonClassName = props.clientState.serverSetting.isUploading ? "body-button-disabled" : "body-button"
+        const uploadButtonAction = props.clientState.serverSetting.isUploading ? () => { } : onModelUploadClicked
+        const uploadButtonLabel = props.clientState.serverSetting.isUploading ? "wait..." : "upload"
+
         return (
             <>
                 <div className="body-row split-3-3-4 left-padding-1 guided">
@@ -115,7 +119,7 @@ export const useServerSettingArea = (props: UseServerSettingProps): ServerSettin
                         {props.clientState.serverSetting.isUploading ? `uploading.... ${props.clientState.serverSetting.uploadProgress}%` : ""}
                     </div>
                     <div className="body-button-container">
-                        <div className="body-button" onClick={onModelUploadClicked}>upload</div>
+                        <div className={uploadButtonClassName} onClick={uploadButtonAction}>{uploadButtonLabel}</div>
                     </div>
                 </div>
             </>
diff --git a/client/demo/src/css/App.css b/client/demo/src/css/App.css
index 0ca0957c..91bdabf1 100644
--- a/client/demo/src/css/App.css
+++ b/client/demo/src/css/App.css
@@ -63,6 +63,21 @@ body {
 }
 .body-row {
 }
+.split-6-4 {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    margin: 1px 0px 1px 0px;
+    & > div:nth-child(1) {
+        left: 0px;
+        width: 60%;
+    }
+    & > div:nth-child(2) {
+        left: 60%;
+        width: 40%;
+    }
+}
+
 .split-4-6 {
     display: flex;
     width: 100%;
@@ -218,6 +233,25 @@ body {
 .body-top-title {
     font-size: 3rem;
 }
+.body-top-title-belongings{
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-start;
+    & > div {
+        margin-left:10px;
+        margin-right:10px;
+    }
+    &>.belonging-item{
+        &>.link{
+            text-decoration: none;
+            &>span{
+                font-size: small;
+            }
+        }
+    }
+}
+
+
 .body-section-title {
     font-size: 1.5rem;
     color: rgb(51, 49, 49);
@@ -246,28 +280,45 @@ body {
     display: flex;
     flex-direction: row;
     align-items: center;
+    & > div {
+        margin-left:5px;
+        margin-right:5px;
+        padding-left:20px;
+        padding-right:20px;
+        
+    }
     .body-button {
         user-select: none;
-        border: solid 1px #333;
+        border: solid 1px #999;
         border-radius: 2px;
-        padding: 2px;
         cursor:pointer;
         vertical-align:middle;
+        &:hover{
+            border: solid 1px #000;
+        }
+    }
+    .body-button-disabled {
+        user-select: none;
+        border: solid 1px #999;
+        border-radius: 2px;
+        vertical-align:middle;
+        background:#ddd;
     }
     .body-button-active {
         user-select: none;
         border: solid 1px #333;
         border-radius: 2px;
-        padding: 2px;
         background:#ada;
     }
     .body-button-stanby {
         user-select: none;
-        border: solid 1px #333;
+        border: solid 1px #999;
         border-radius: 2px;
-        padding: 2px;
         background:#aba;
         cursor:pointer;
+        &:hover{
+            border: solid 1px #000;
+        }
     }
 }
 .body-select-container {