Merge pull request #1361 from lvuch/lh-0921

ui design polish

components/form/ArrayList.vue

@@ -186,7 +186,7 @@ export default {
 <template>
   <div>
     <div v-if="title" class="clearfix">
-      <label :style="{'color': 'var(--input-label)', 'font-size':'14px'}">{{ title }} <i v-if="protip" v-tooltip="protip" class="icon icon-info" style="font-size: 12px" /></label>
+      <label :style="{'color': 'var(--input-label)', 'font-size':'14px'}">{{ title }} <i v-if="protip" v-tooltip="protip" class="icon icon-info" style="font-size: 14px" /></label>
     </div>
 
     <template v-if="rows.length">

components/form/KeyValue.vue

@@ -357,7 +357,7 @@ export default {
     <div v-if="rows.length || isView" :class="{'extra-column':threeColumns}" class="kv-row headers">
       <label class="text-label" :class="{'view':isView}">
         {{ keyLabel }}
-        <i v-if="protip && !isView" v-tooltip="protip" class="icon icon-info" style="font-size: 12px" />
+        <i v-if="protip && !isView" v-tooltip="protip" class="icon icon-info" style="font-size: 14px" />
       </label>
       <label class="text-label" :class="{'view':isView}">{{ valueLabel }}</label>
       <span v-if="threeColumns" :class="{'view':isView}" />

components/form/RadioButton.vue

@@ -114,6 +114,13 @@ export default {
   }
 }
 
+.radio-group {
+  .text-label {
+    display: block;
+    padding-bottom: 5px;
+  }
+}
+
 .radio-container {
   position: relative;
   display: inline-flex;
@@ -122,6 +129,7 @@ export default {
   cursor: pointer;
   user-select: none;
   border-radius: var(--border-radius);
+  padding-bottom: 5px;
 
   .radio-label {
     color: var(--input-label);
@@ -131,10 +139,10 @@ export default {
  .radio-custom {
     height: 14px;
     width: 14px;
-    background-color: var(--body-bg);
+    background-color: var(--input-bg);
     border-radius: 50%;
     transition: all 0.3s ease-out;
-    border: 1px solid var(--border);
+    border: 1.5px solid var(--border);
 
     &:focus {
       outline: none;
@@ -152,7 +160,7 @@ export default {
       -ms-transform: rotate(0deg) scale(1);
       transform: rotate(0deg) scale(1);
       opacity:1;
-      border: 1px solid var(--input-label);
+      border: 1.5px solid var(--dropdown-text);
   }
 
   input:disabled ~ .radio-custom {

edit/catalog.cattle.io.clusterrepo.vue

@@ -31,7 +31,7 @@ export default {
     <NameNsDescription v-model="value" :mode="mode" :namespaced="isNamespaced" />
 
     <h2>{{ t('catalog.repo.target.label') }}</h2>
-    <div class="row">
+    <div class="row mb-10">
       <div class="col span-6">
         <RadioGroup
           v-model="isGit"
@@ -43,7 +43,7 @@ export default {
       </div>
     </div>
 
-    <div v-if="isGit" class="row">
+    <div v-if="isGit" class="row mb-10">
       <div class="col span-6">
         <LabeledInput
           v-model="value.spec.gitRepo"

edit/service.vue

@@ -264,7 +264,7 @@ export default {
                   v-if="checkTypeIs('ClusterIP') || checkTypeIs('LoadBalancer') || checkTypeIs('NodePort')"
                   v-tooltip="t('servicesPage.ips.clusterIpHelpText')"
                   class="icon icon-info"
-                  style="font-size: 12px"
+                  style="font-size: 14px"
                 />
               </template>
             </LabeledInput>