1 files changed, 42 insertions, 20 deletions
diff --git a/src/views/Settings/DateTime/DateTime.vue b/src/views/Settings/DateTime/DateTime.vue
index f5e063d1..7ab3ec0e 100644
--- a/src/views/Settings/DateTime/DateTime.vue
+++ b/src/views/Settings/DateTime/DateTime.vue
@@ -1,57 +1,67 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="xxl" class="pt-0 m-0">
     <page-title />
-    <b-row>
-      <b-col md="8" xl="6">
-        <alert variant="info" class="mb-4">
-          <span>
+    <b-row class="m-4">
+      <b-col md="8" xl="12">
+        <alert variant="info">
+          <span class="regular-12px">
             {{ $t('pageDateTime.alert.message') }}
-            <b-link to="/profile-settings">
+            <b-link class="semi-bold-12px" to="/profile-settings">
               {{ $t('pageDateTime.alert.link') }}</b-link
             >
           </span>
         </alert>
       </b-col>
     </b-row>
-    <page-section>
+    <page-section class="m-4">
       <b-row>
-        <b-col lg="3">
+        <b-col sm="6" lg="5" xl="4" xxl="3">
           <dl>
-            <dt>{{ $t('pageDateTime.form.date') }}</dt>
-            <dd v-if="bmcTime">{{ bmcTime | formatDate }}</dd>
+            <dt class="semi-bold-12px">{{ $t('pageDateTime.form.date') }}</dt>
+            <dd v-if="bmcTime" class="regular-12px">
+              {{ bmcTime | formatDate }}
+            </dd>
             <dd v-else>--</dd>
           </dl>
         </b-col>
-        <b-col lg="3">
+        <b-col sm="6" lg="5" xl="4" xxl="3">
           <dl>
-            <dt>{{ $t('pageDateTime.form.time.label') }}</dt>
-            <dd v-if="bmcTime">{{ bmcTime | formatTime }}</dd>
+            <dt class="semi-bold-12px">
+              {{ $t('pageDateTime.form.time.label') }}
+            </dt>
+            <dd v-if="bmcTime" class="regular-12px">
+              {{ bmcTime | formatTime }}
+            </dd>
             <dd v-else>--</dd>
           </dl>
         </b-col>
       </b-row>
     </page-section>
-    <page-section :section-title="$t('pageDateTime.configureSettings')">
+    <page-section class="m-4">
+      <label class="semi-bold-16px">{{
+        $t('pageDateTime.configureSettings')
+      }}</label>
       <b-form novalidate @submit.prevent="submitForm">
         <b-form-group
           label="Configure date and time"
           :disabled="loading"
           label-sr-only
+          class="system-control__radio regular-12px"
         >
           <b-form-radio
             v-model="form.configurationSelected"
             value="manual"
             data-test-id="dateTime-radio-configureManual"
           >
-            {{ $t('pageDateTime.form.manual') }}
+            {{ $t('SystemDescription.UseServerDatettime') }}
           </b-form-radio>
           <b-row class="mt-3 ml-3">
-            <b-col sm="6" lg="4" xl="3">
+            <b-col sm="7" lg="5" xl="5" xxl="3">
               <b-form-group
                 :label="$t('pageDateTime.form.date')"
                 label-for="input-manual-date"
               >
-                <b-form-text id="date-format-help">YYYY-MM-DD</b-form-text>
+                <span class="regular-12px">YYYY-MM-DD</span>
                 <b-input-group>
                   <b-form-input
                     id="input-manual-date"
@@ -95,12 +105,12 @@
                 </b-input-group>
               </b-form-group>
             </b-col>
-            <b-col sm="6" lg="4" xl="3">
+            <b-col sm="7" lg="5" xl="5" xxl="3">
               <b-form-group
                 :label="$t('pageDateTime.form.time.timezone', { timezone })"
                 label-for="input-manual-time"
               >
-                <b-form-text id="time-format-help">HH:MM</b-form-text>
+                <span class="regular-12px">HH:MM</span>
                 <b-input-group>
                   <b-form-input
                     id="input-manual-time"
@@ -124,10 +134,11 @@
           </b-row>
           <b-form-radio
             v-model="form.configurationSelected"
+            class="system-control__radio regular-12px"
             value="ntp"
             data-test-id="dateTime-radio-configureNTP"
           >
-            NTP
+            {{ $t('SystemDescription.GetNtpFromServer') }}
           </b-form-radio>
           <b-row class="mt-3 ml-3">
             <b-col sm="6" lg="4" xl="3">
@@ -184,6 +195,7 @@
             </b-col>
           </b-row>
           <b-button
+            size="md"
             variant="primary"
             type="submit"
             data-test-id="dateTime-button-saveSettings"
@@ -415,3 +427,13 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.form-control {
+  height: 40px;
+  max-width: 270px;
+}
+
+.input-group {
+  max-width: 270px;
+}
+</style>