Update design => DONE

src/app/search/components/criteria/cone-search-tab.component.html

@@ -14,13 +14,6 @@
         </button>
         <div class="row">
             <div class="col">
-                <div class="row">
-                    <div style="background:#c2c1c2;" class="col d-block d-sm-none">XS</div>
-                    <div style="background:#eec643;" class="col d-none d-sm-block d-md-none">SM</div>
-                    <div style="background:#f4ab42;" class="col d-none d-md-block d-lg-none">MD</div>
-                    <div style="background:#be0c02;" class="col d-none d-lg-block d-xl-none text-white">LG</div>
-                    <div style="background:#5f021f;" class="col d-none d-xl-block text-white">XL</div>
-                </div>
                 <div class="row pb-4">
                     <div class="col">
                         <app-resolver
@@ -32,14 +25,7 @@
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-auto mt-2 pt-4">
-                        <button class="btn btn-outline-secondary"
-                            [disabled]="coneSearch"
-                            (click)="unit === 'degree' ? unit = 'hms' : unit = 'degree'">
-                            Switch unit
-                        </button>
-                    </div>
-                    <div class="col">
+                    <div class="col pb-4">
                         <app-ra
                             [coneSearch]="coneSearch"
                             [resolver]="resolved"
@@ -47,6 +33,14 @@
                             (changeRa)="csChange('ra', $event)">
                         </app-ra>
                     </div>
+                    <div class="col-auto p-0 align-self-center">
+                        <button class="btn btn-outline-secondary"
+                                [disabled]="coneSearch"
+                                (click)="unit === 'degree' ? unit = 'hms' : unit = 'degree'"
+                                title="Change unit">
+                            <span class="fas fa-sync-alt"></span>
+                        </button>
+                    </div>
                     <div class="col">
                         <app-dec
                             [coneSearch]="coneSearch"

src/app/search/components/criteria/cone-search/dec.component.html

@@ -9,17 +9,18 @@
 </div>
 
 <div class="row mt-2 px-3">
-    <div class="col pl-0">
+    <div class="col px-0 pr-xl-1">
         <div class="input-group">
             <select class="custom-select" name="operator" [formControl]="decH" (input)="decChange('hms')">
                 <option *ngFor="let d of degrees" [value]="d" [selected]="d === decH.value">{{ d }}</option>
             </select>
             <div class="input-group-append">
-                <span class="input-group-text">H</span>
+                <span class="input-group-text">°</span>
             </div>
         </div>
     </div>
-    <div class="col pl-0">
+    <div class="w-100 d-block d-xl-none"></div>
+    <div class="col mt-1 mt-xl-auto px-0 pr-xl-1">
         <div class="input-group">
             <select class="custom-select" name="operator" [formControl]="decM" (input)="decChange('hms')">
                 <option *ngFor="let m of minutes" [value]="m" [selected]="m === decM.value"> {{ m }}</option>
@@ -29,7 +30,8 @@
             </div>
         </div>
     </div>
-    <div class="col px-0">
+    <div class="w-100 d-block d-xl-none"></div>
+    <div class="col mt-1 mt-xl-auto px-0">
         <div class="input-group">
             <input type="text" class="form-control" [formControl]="decS" (input)="decChange('hms')" autocomplete="off">
             <div class="input-group-append">

src/app/search/components/criteria/cone-search/dec.component.ts

@@ -7,6 +7,7 @@ import { ConeSearch, Resolver } from "../../../store/model";
 @Component({
     selector: 'app-dec',
     templateUrl: 'dec.component.html',
+    styleUrls: ['input-group.component.css'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DecComponent {

src/app/search/components/criteria/cone-search/input-group.component.css

+.input-group-text {
+    width: 36px;
+}
\ No newline at end of file

src/app/search/components/criteria/cone-search/ra.component.html

@@ -9,7 +9,7 @@
 </div>
 
 <div class="row mt-2 px-3">
-    <div class="col pl-0">
+    <div class="col px-0 pr-xl-1">
         <div class="input-group">
             <select class="custom-select" name="operator" [formControl]="raH" (input)="raChange('hms')">
                 <option *ngFor="let h of hours" [value]="h" [selected]="h === raH.value">{{ h }}</option>
@@ -19,7 +19,8 @@
             </div>
         </div>
     </div>
-    <div class="col pl-0">
+    <div class="w-100 d-block d-xl-none"></div>
+    <div class="col mt-1 mt-xl-auto px-0 pr-xl-1">
         <div class="input-group">
             <select class="custom-select" name="operator" [formControl]="raM" (input)="raChange('hms')">
                 <option *ngFor="let m of minutes" [value]="m" [selected]="m === raM.value"> {{ m }}</option>
@@ -29,7 +30,8 @@
             </div>
         </div>
     </div>
-    <div class="col px-0">
+    <div class="w-100 d-block d-xl-none"></div>
+    <div class="col mt-1 mt-xl-auto px-0">
         <div class="input-group">
             <input type="text" class="form-control" [formControl]="raS" (input)="raChange('hms')" autocomplete="off">
             <div class="input-group-append">

src/app/search/components/criteria/cone-search/ra.component.ts

@@ -7,6 +7,7 @@ import { ConeSearch, Resolver } from "../../../store/model";
 @Component({
     selector: 'app-ra',
     templateUrl: 'ra.component.html',
+    styleUrls: ['input-group.component.css'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RaComponent {