Fixed input styling #344 #1.1.0.rc4

kdb-web/src/app/modules/admin/settings/components/settings/settings.component.html

@@ -135,34 +135,43 @@
     <div class="content-row">
       <div class="content-column">
         <div class="content-data-name">{{'admin.settings.bot.help_url' | translate}}:</div>
-        <input class="content-data-value" type="text" pInputText [(ngModel)]="config.helpCommandReferenceUrl" placeholder="{{'admin.settings.bot.help_url' | translate}}">
+        <div class="content-data-value">
+          <input type="text" pInputText [(ngModel)]="config.helpCommandReferenceUrl" placeholder="{{'admin.settings.bot.help_url' | translate}}">
+        </div>
       </div>
     </div>
 
     <div class="content-row">
       <div class="content-column">
         <div class="content-data-name">{{'admin.settings.bot.wait_for_restart' | translate}}:</div>
-        <input class="content-data-value" type="number" pInputText [(ngModel)]="config.waitForRestart" placeholder="{{'admin.settings.bot.wait_for_restart' | translate}}">
+        <div class="content-data-value">
+          <input type="number" pInputText [(ngModel)]="config.waitForRestart" placeholder="{{'admin.settings.bot.wait_for_restart' | translate}}">
+        </div>
       </div>
     </div>
 
     <div class="content-row">
       <div class="content-column">
         <div class="content-data-name">{{'admin.settings.bot.wait_for_shutdown' | translate}}:</div>
-        <input class="content-data-value" type="number" pInputText [(ngModel)]="config.waitForShutdown" placeholder="{{'admin.settings.bot.wait_for_shutdown' | translate}}">
+        <div class="content-data-value">
+          <input type="number" pInputText [(ngModel)]="config.waitForShutdown" placeholder="{{'admin.settings.bot.wait_for_shutdown' | translate}}">
+        </div>
       </div>
     </div>
 
     <div class="content-row">
       <div class="content-column">
         <div class="content-data-name">{{'admin.settings.bot.cache_max_messages' | translate}}:</div>
-        <input class="content-data-value" type="number" pInputText [(ngModel)]="config.cacheMaxMessages" placeholder="{{'admin.settings.bot.cache_max_messages' | translate}}">
+        <div class="content-data-value">
+          <input type="number" pInputText [(ngModel)]="config.cacheMaxMessages" placeholder="{{'admin.settings.bot.cache_max_messages' | translate}}">
+        </div>
       </div>
     </div>
 
     <div class="content-divider"></div>
     <app-config-list translationKey="admin.settings.bot.ping_urls" [(data)]="config.pingURLs"></app-config-list>
-    <app-config-list translationKey="admin.settings.bot.technician_ids" [options]="possibleTechnicians" optionLabel="name" optionValue="id" [(data)]="config.technicianIds"></app-config-list>
+    <app-config-list translationKey="admin.settings.bot.technician_ids" [options]="possibleTechnicians" optionLabel="name" optionValue="id"
+                     [(data)]="config.technicianIds"></app-config-list>
     <app-feature-flag-list [(data)]="config.featureFlags"></app-feature-flag-list>
 
     <div class="content-row">

kdb-web/src/app/modules/view/server/config/components/config/config.component.html

@@ -13,68 +13,72 @@
     <div class="content-row">
       <div class="content-column">
         <div class="content-data-name">{{'view.server.config.bot.message_delete_timer' | translate}}:</div>
-        <input class="content-data-value" type="number" pInputText [(ngModel)]="config.messageDeleteTimer"
+        <div class="content-data-value"><input type="number" pInputText [(ngModel)]="config.messageDeleteTimer"
-               placeholder="{{'view.server.config.bot.message_delete_timer' | translate}}">
+                                               placeholder="{{'view.server.config.bot.message_delete_timer' | translate}}"></div>
       </div>
     </div>
 
     <div class="content-row">
       <div class="content-column">
         <div class="content-data-name">{{'view.server.config.bot.notification_chat_id' | translate}}:</div>
-        <input class="content-data-value" type="text" pInputText [(ngModel)]="config.notificationChatId"
+        <p-dropdown class="content-data-value" [options]="textChannels" optionLabel="name" optionValue="id" [(ngModel)]="config.notificationChatId"
-               placeholder="{{'view.server.config.bot.notification_chat_id' | translate}}">
+                    placeholder="{{'view.server.config.bot.notification_chat_id' | translate}}"></p-dropdown>
       </div>
     </div>
 
     <div class="content-row">
       <div class="content-column">
         <div class="content-data-name">{{'view.server.config.bot.max_voice_state_hours' | translate}}:</div>
-        <input class="content-data-value" type="number" pInputText [(ngModel)]="config.maxVoiceStateHours"
+        <div class="content-data-value"><input type="number" pInputText [(ngModel)]="config.maxVoiceStateHours"
-               placeholder="{{'view.server.config.bot.max_voice_state_hours' | translate}}">
+                                               placeholder="{{'view.server.config.bot.max_voice_state_hours' | translate}}"></div>
       </div>
     </div>
 
     <div class="content-row">
       <div class="content-column">
         <div class="content-data-name">{{'view.server.config.bot.xp_per_message' | translate}}:</div>
-        <input class="content-data-value" type="number" pInputText [(ngModel)]="config.xpPerMessage" placeholder="{{'view.server.config.bot.xp_per_message' | translate}}">
+        <div class="content-data-value"><input type="number" pInputText [(ngModel)]="config.xpPerMessage" placeholder="{{'view.server.config.bot.xp_per_message' | translate}}">
+        </div>
       </div>
     </div>
 
     <div class="content-row">
       <div class="content-column">
         <div class="content-data-name">{{'view.server.config.bot.xp_per_reaction' | translate}}:</div>
-        <input class="content-data-value" type="number" pInputText [(ngModel)]="config.xpPerReaction" placeholder="{{'view.server.config.bot.xp_per_reaction' | translate}}">
+        <div class="content-data-value"><input type="number" pInputText [(ngModel)]="config.xpPerReaction" placeholder="{{'view.server.config.bot.xp_per_reaction' | translate}}">
+        </div>
       </div>
     </div>
 
     <div class="content-row">
       <div class="content-column">
         <div class="content-data-name">{{'view.server.config.bot.max_message_xp_per_hour' | translate}}:</div>
-        <input class="content-data-value" type="number" pInputText [(ngModel)]="config.maxMessageXpPerHour"
+        <div class="content-data-value"><input type="number" pInputText [(ngModel)]="config.maxMessageXpPerHour"
-               placeholder="{{'view.server.config.bot.max_message_xp_per_hour' | translate}}">
+                                               placeholder="{{'view.server.config.bot.max_message_xp_per_hour' | translate}}"></div>
       </div>
     </div>
 
     <div class="content-row">
       <div class="content-column">
         <div class="content-data-name">{{'view.server.config.bot.xp_per_ontime_hour' | translate}}:</div>
-        <input class="content-data-value" type="number" pInputText [(ngModel)]="config.xpPerOntimeHour" placeholder="{{'view.server.config.bot.xp_per_ontime_hour' | translate}}">
+        <div class="content-data-value"><input type="number" pInputText [(ngModel)]="config.xpPerOntimeHour"
+                                               placeholder="{{'view.server.config.bot.xp_per_ontime_hour' | translate}}"></div>
       </div>
     </div>
 
     <div class="content-row">
       <div class="content-column">
         <div class="content-data-name">{{'view.server.config.bot.xp_per_event_participation' | translate}}:</div>
-        <input class="content-data-value" type="number" pInputText [(ngModel)]="config.xpPerEventParticipation"
+        <div class="content-data-value"><input type="number" pInputText [(ngModel)]="config.xpPerEventParticipation"
-               placeholder="{{'view.server.config.bot.xp_per_event_participation' | translate}}">
+                                               placeholder="{{'view.server.config.bot.xp_per_event_participation' | translate}}"></div>
       </div>
     </div>
 
     <div class="content-row">
       <div class="content-column">
         <div class="content-data-name">{{'view.server.config.bot.xp_per_achievement' | translate}}:</div>
-        <input class="content-data-value" type="number" pInputText [(ngModel)]="config.xpPerAchievement" placeholder="{{'view.server.config.bot.xp_per_achievement' | translate}}">
+        <div class="content-data-value"><input type="number" pInputText [(ngModel)]="config.xpPerAchievement"
+                                               placeholder="{{'view.server.config.bot.xp_per_achievement' | translate}}"></div>
       </div>
     </div>
 

kdb-web/src/styles.scss

@@ -175,6 +175,10 @@ header {
             align-items: center;
 
             font-size: 18px;
+
+            input {
+              width: 100% !important;
+            }
           }
 
           .content-data-value-row {
@@ -458,6 +462,10 @@ header {
     align-items: center;
 
     font-size: 18px;
+
+    input {
+      width: 100% !important;
+    }
   }
 
   .content-divider {
@@ -620,3 +628,8 @@ footer {
 .hidden-column {
   display: none;
 }
+
+p-inputNumber {
+  padding: 0 !important;
+  border: none !important;
+}

kdb-web/src/styles/themes/sh-edraft-dark-theme.scss

@@ -348,9 +348,11 @@
   }
 
   p-dropdown {
+
     .p-dropdown {
-      background-color: $primaryBackgroundColor !important;
+      border: $default-border;
-      border-color: $primaryTextColor !important;
+      border-radius: 10px;
+      background-color: $secondaryBackgroundColor !important;
       color: $primaryTextColor !important;
 
       span {
@@ -681,4 +683,7 @@
     box-shadow: none !important;
   }
 
+  p-inputNumber {
+    background-color: $primaryBackgroundColor !important;
+  }
 }