226 change to sft roles page

src/components/Select.svelte

@@ -39,7 +39,7 @@
 
     <button
       type="button"
-      class={`${className} btn dropdown-toggle`}
+      class={`${className} inputSelect btn dropdown-toggle`}
       bind:this={dropdownTrigger}
     >
       <slot name="icon"></slot>
@@ -48,7 +48,7 @@
         <img class="expand" src={expandIcon} alt="expand"/>
       {/if}
     </button>
-    <div slot="DropdownMenu" class={`${dropDownClass} ${className} dropdown`}>
+    <div slot="DropdownMenu" class={`${dropDownClass} ${className} inputSelect dropdown`}>
       {#each options as option}
         <button class="{selected === option.displayName? 'selected' : ''} dropdown-item" type="button"
                 on:click={()=>commitAction(option)}>
@@ -123,6 +123,24 @@
         color: #FFFFFF;
     }
 
+    .rolesInputSelect{
+        min-width: 160px;
+    }
+
+    .rolesInputSelect.dropdown{
+        min-width: 160px;
+        max-width: 200px;
+    }
+
+    .mintSelect{
+        width: 360px;
+    }
+
+    .mintSelect.dropdown{
+        min-width: 360px;
+        max-width: 360px;
+    }
+
     .inputSelect {
         background: #ECECEC;
         border-radius: 5px;
@@ -131,16 +149,13 @@
         font-size: 16px;
         line-height: 25px;
         color: #000000;
-        width: 360px;
     }
 
     .inputSelect.dropdown {
         max-height: 255px;
         height: auto;
         overflow: auto;
         background-color: #ececec;
-        min-width: 360px;
-        max-width: 360px;
         overflow-x: hidden;
     }
 

src/routes/Mint.svelte

@@ -365,9 +365,8 @@
             <div class="schema-dropdown flex justify-between mb-6">
               <label class="f-weight-700 custom-col">Asset class</label>
               <Select options={$schemas}
-
                       on:select={handleSchemaSelect}
-                      label={'Choose'} className={"inputSelect"} expandIcon={icons.expand_black}></Select>
+                      label={'Choose'} className={"mintSelect"} expandIcon={icons.expand_black}></Select>
 
             </div>
             <Schema schema={selectedSchema} on:fileUpload={handleFileUpload}></Schema>

src/routes/Roles.svelte

@@ -95,25 +95,27 @@
 </script>
 <div class="roles-container">
   <DefaultFrame>
-    <div slot="header_buttons">
-      <button class="default-btn" on:click={()=>{navigate("#new-asset-class")}}>New asset class</button>
-    </div>
-
     <div slot="content">
-      <span class="warning error">Important - Deleting or adding is permanent on the blockchain. If all role admins are removed  then it will be unrecoverable.</span>
       <div class="roles">
-        <div class="grant-role-txt f-weight-700">Grant a role</div>
+        <div class="w-full flex justify-end">
+          <button class="asset-class-btn default-btn" on:click={()=>{navigate("#new-asset-class")}}>
+            New asset class
+          </button>
+        </div>
+        <div class="grant-role-txt f-weight-700 flex justify-between">Grant a role</div>
         <div class="error">{error}</div>
         <div class="role-list">
           <table>
             <tr>
-              <td><label class="f-weight-700">Role:</label></td>
+              <td class="flex items-center">
+                <img src={icons.plus_sign} alt="add" class="plus">
+                <label class="f-weight-700">Role:</label></td>
               <td>
                 <div>
                   <Select options={ROLES.map(r=>{return {...r,displayName: toSentenceCase(r.roleName)}})}
 
                           on:select={handleRoleSelect}
-                          label={'Choose'} className={"inputSelect"} expandIcon={icons.expand_black}></Select>
+                          label={'Choose'} className={"rolesInputSelect"} expandIcon={icons.expand_black}></Select>
                 </div>
               </td>
             </tr>
@@ -123,9 +125,12 @@
                          bind:value={account}></td>
             </tr>
           </table>
-
           <button class="default-btn" on:click={grantRole} disabled={!!error || !account || !roleName}>Enter</button>
         </div>
+        <div class="warning error">Important - Deleting or adding is permanent on the blockchain. If all role admins are
+          removed then it will be unrecoverable.
+        </div>
+
         {#if loading}
           <SftLoader width="50"></SftLoader>
         {/if}
@@ -164,6 +169,7 @@
 
     .roles {
         text-align: left;
+        width: 550px;
     }
 
     .roles-data {
@@ -181,6 +187,8 @@
         font-weight: 400;
         font-size: 16px;
         line-height: 20px;
+        margin-top: 18px;
+        margin-bottom: 30px
     }
 
     .grant-role-txt {
@@ -210,12 +218,17 @@
         color: #000000;
     }
 
-    .contract-address {
-        color: inherit;
-    }
-
     .default-input {
         padding-left: 13px;
     }
 
+    .asset-class-btn{
+        margin-right: -2.5rem;
+    }
+
+    .plus {
+        margin-left: -22px;
+        margin-right: 7px;
+    }
+
 </style>