chore: update resource dialog style (#395)

web/src/components/ResourcesDialog.tsx

@@ -168,16 +168,18 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
         </button>
       </div>
       <div className="dialog-content-container">
-        <div className="upload-resource-container" onClick={() => handleUploadFileBtnClick()}>
-          <div className="upload-resource-btn">
-            <Icon.File className="icon-img" />
-            <span>{t("resources.upload")}</span>
+        <div className="action-buttons-container">
+          <div className="buttons-wrapper">
+            <div className="upload-resource-btn" onClick={() => handleUploadFileBtnClick()}>
+              <Icon.File className="icon-img" />
+              <span>{t("resources.upload")}</span>
+            </div>
+          </div>
+          <div className="buttons-wrapper">
+            <button className="delete-unused-resource-btn" onClick={handleDeleteUnusedResourcesBtnClick}>
+              {t("resources.clear-unused-resources")}
+            </button>
           </div>
-        </div>
-        <div className="delete-unused-resource-container">
-          <button className="delete-unused-resource-btn" onClick={handleDeleteUnusedResourcesBtnClick}>
-            {t("resources.clear-unused-resources")}
-          </button>
         </div>
         {loadingState.isLoading ? (
           <div className="loading-text-container">
@@ -188,7 +190,6 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
             <div className="fields-container">
               <span className="field-text id-text">ID</span>
               <span className="field-text name-text">NAME</span>
-              <span className="field-text type-text">TYPE</span>
               <span></span>
             </div>
             {resources.length === 0 ? (
@@ -205,14 +206,6 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
                       {resource.filename}
                     </span>
                   </span>
-                  <span className="field-text type-text">
-                    <span
-                      onMouseEnter={(e) => handleResourceNameOrTypeMouseEnter(e, resource.type)}
-                      onMouseLeave={handleResourceNameOrTypeMouseLeave}
-                    >
-                      {resource.type}
-                    </span>
-                  </span>
                   <div className="buttons-container">
                     <Dropdown
                       actionsClassName="!w-28"

web/src/less/resources-dialog.less

@@ -4,28 +4,28 @@
   @apply px-4;
 
   > .dialog-container {
-    @apply w-180 max-w-full mb-8;
+    @apply w-112 max-w-full mb-8;
 
     > .dialog-content-container {
       @apply flex flex-col justify-start items-start w-full;
 
-      > .upload-resource-container {
-        @apply mt-2 mb-4 py-8 cursor-pointer w-full rounded flex flex-row justify-center items-center bg-blue-50 border border-blue-600 hover:opacity-80;
+      > .action-buttons-container {
+        @apply w-full flex flex-row justify-between items-center mb-2;
 
-        > .upload-resource-btn {
-          @apply px-3 py-1 rounded flex flex-row justify-center items-center border border-dashed border-blue-600 text-blue-600 bg-blue-50;
+        > .buttons-wrapper {
+          @apply flex flex-row justify-start items-center;
 
-          > .icon-img {
-            @apply w-4 h-auto mr-1;
-          }
-        }
-      }
+          > .upload-resource-btn {
+            @apply text-sm cursor-pointer px-3 py-1 rounded flex flex-row justify-center items-center border border-blue-600 text-blue-600 bg-blue-50 hover:opacity-80;
 
-      > .delete-unused-resource-container {
-        @apply flex w-full justify-end;
+            > .icon-img {
+              @apply w-4 h-auto mr-1;
+            }
+          }
 
-        > .delete-unused-resource-btn {
-          @apply text-sm py-1 px-3 mr-2 rounded-md hover:opacity-80 bg-red-100 border border-solid border-red-600 text-red-600;
+          > .delete-unused-resource-btn {
+            @apply text-sm py-1 px-3 mr-2 rounded bg-red-100 border border-solid border-red-600 text-red-600 hover:opacity-80;
+          }
         }
       }
 
@@ -37,7 +37,7 @@
         @apply flex flex-col justify-start items-start w-full;
 
         > .fields-container {
-          @apply px-2 py-2 w-full grid grid-cols-10 border-b;
+          @apply px-2 py-2 w-full grid grid-cols-7 border-b;
 
           > .field-text {
             @apply font-mono text-gray-400;
@@ -49,7 +49,7 @@
         }
 
         > .resource-container {
-          @apply px-2 py-2 w-full grid grid-cols-10;
+          @apply px-2 py-2 w-full grid grid-cols-7;
 
           > .buttons-container {
             @apply w-full flex flex-row justify-end items-center;
@@ -66,38 +66,6 @@
           &.name-text {
             @apply col-span-4;
           }
-
-          &.type-text {
-            @apply col-span-3;
-          }
-
-          > .form-label {
-            min-height: 28px;
-
-            &.filename-label {
-            @apply w-full flex flex-row justify-between;
-
-              > input {
-              @apply grow-0 w-40 shadow-inner px-2 mr-2 border rounded leading-7 bg-transparent focus:border-black;
-              }
-
-              > .btns-container {
-              @apply shrink-0 grow flex flex-row justify-end items-center;
-
-                > .btn {
-                @apply text-sm shadow px-2 leading-7 rounded border hover:opacity-80 bg-gray-50;
-
-                  &.cancel-btn {
-                  @apply shadow-none border-none bg-transparent;
-                  }
-
-                  &.confirm-btn {
-                  @apply bg-green-600 border-green-600 text-white;
-                  }
-                }
-              }
-            }
-          }
         }
       }
     }