From 928997b5dee0b386cd49e9d9b3180365fed57748 Mon Sep 17 00:00:00 2001
From: Anwesh Nayak <anweshknayak@gmail.com>
Date: Fri, 8 Jun 2018 00:05:25 +0530
Subject: [PATCH] Buttons for menu revamped (#40)

* menu buttons revamped
---
 .../create-client.component.html              |   2 +-
 .../view-loan/view-loan.component.html        | 288 ++++++++++--------
 .../view-loan/view-loan.component.scss        |   8 +-
 3 files changed, 160 insertions(+), 138 deletions(-)

diff --git a/src/app/clients/create-client/create-client.component.html b/src/app/clients/create-client/create-client.component.html
index d412eebfc..4a4a1568c 100644
--- a/src/app/clients/create-client/create-client.component.html
+++ b/src/app/clients/create-client/create-client.component.html
@@ -70,7 +70,7 @@
 
     
   </aw-wizard-step>
-  <aw-wizard-step stepTitle="Title of step 2" [navigationSymbol]="{ symbol: '2' }" awOptionalStep>
+  <aw-wizard-step stepTitle="Title of step 2" [navigationSymbol]="{ symbol: '2' }" >
       <div class="col-sm-6 mx-auto">
           <div class="card mt-5">
         <!--     <div class="card-header"><legend> Loan</legend></div>
diff --git a/src/app/clients/view-loan/view-loan.component.html b/src/app/clients/view-loan/view-loan.component.html
index eb962b10c..9ac2466fd 100644
--- a/src/app/clients/view-loan/view-loan.component.html
+++ b/src/app/clients/view-loan/view-loan.component.html
@@ -5,15 +5,26 @@
     <div class="col text-center">
       <div class="card  border-secondary d-inline-block mt-5">
 
-        <button type="button" class="btn btn-flat btn-default"><b>Add Loan</b></button>
-        <button type="button" class="btn btn-flat btn-default"><b>Approve</b></button>
-        <button type="button" class="btn btn-flat btn-default"><b>Modify</b></button>
-        <button type="button" class="btn btn-flat btn-default"><b>Reject</b></button>
-        <button type="button" class="btn btn-flat btn-default"><b>More</b></button>
-
+        <div class="btn-group" role="group">
+          <button type="button" class="btn btn-flat btn-default">
+            <b>Add Loan</b>
+          </button>
+          <button type="button" class="btn btn-flat btn-default">
+            <b>Approve</b>
+          </button>
+          <button type="button" class="btn btn-flat btn-default">
+            <b>Modify</b>
+          </button>
+          <button type="button" class="btn btn-flat btn-default">
+            <b>Reject</b>
+          </button>
+          <button type="button" class="btn btn-flat btn-default">
+            <b>More</b>
+          </button>
+        </div>
 
       </div>
-    </div>  
+    </div>
     <div class="row mt-5 mb-5">
       <div class="col-sm-4">
         <div class="card">
@@ -185,124 +196,127 @@
       </div>
     </div>
     <div class="card bg-secondary mb-5 mt-5">
-    <ngb-tabset class="ml-3 mt-1 mr-3" >
-      <ngb-tab title="Simple">
-        
-        <ng-template ngbTabContent>
-            
-                <table class="table table-active table-hover table-responsive-md table-fixed mt-3">
+      <ngb-tabset class="ml-3 mt-1 mr-3">
+        <ngb-tab title="Simple">
 
-                    <!--Table head-->
-                    <thead>
-                      <tr>
-                        <th>#</th>
-                        <th>Name</th>
-                        <th>Surname</th>
-                        <th>Country</th>
-                        <th>City</th>
-                        <th>Position</th>
-        
-                      </tr>
-                    </thead>
-                    <!--Table head-->
-        
-                    <!--Table body-->
-                    <tbody>
-                      <tr>
-                        <th scope="row">4</th>
-                        <td>Jerry</td>
-                        <td>Horwitz</td>
-                        <td>Italy</td>
-                        <td>Bari</td>
-                        <td>Editor-in-chief</td>
-        
-                      </tr>
-                      <tr>
-                        <th scope="row">5</th>
-                        <td>Janis</td>
-                        <td>Joplin</td>
-                        <td>Poland</td>
-                        <td>Warsaw</td>
-                        <td>Video Maker</td>
-        
-                      </tr>
-                      <tr>
-                        <th scope="row">6</th>
-                        <td>Gary</td>
-                        <td>Winogrand</td>
-                        <td>Germany</td>
-                        <td>Berlin</td>
-                        <td>Photographer</td>
-        
-                      </tr>
-                      <tr>
-                        <th scope="row">7</th>
-                        <td>Angie</td>
-                        <td>Smith</td>
-                        <td>USA</td>
-                        <td>San Francisco</td>
-                        <td>Teacher</td>
-        
-                      </tr>
-                      <tr>
-                        <th scope="row">8</th>
-                        <td>John</td>
-                        <td>Mattis</td>
-                        <td>France</td>
-                        <td>Paris</td>
-                        <td>Actor</td>
-        
-                      </tr>
-                      <tr>
-                        <th scope="row">9</th>
-                        <td>Otto</td>
-                        <td>Morris</td>
-                        <td>Germany</td>
-                        <td>Munich</td>
-                        <td>Singer</td>
-        
-                      </tr>
-                      <tr>
-                        <th scope="row">9</th>
-                        <td>Otto</td>
-                        <td>Morris</td>
-                        <td>Germany</td>
-                        <td>Munich</td>
-                        <td>Singer</td>
-        
-                      </tr>
-                      <tr>
-                        <th scope="row">9</th>
-                        <td>Otto</td>
-                        <td>Morris</td>
-                        <td>Germany</td>
-                        <td>Munich</td>
-                        <td>Singer</td>
-        
-                      </tr>
-                      <tr>
-                        <th scope="row">9</th>
-                        <td>Otto</td>
-                        <td>Morris</td>
-                        <td>Germany</td>
-                        <td>Munich</td>
-                        <td>Singer</td>
-        
-                      </tr>
-            
-                    </tbody>
-                    <!--Table body-->
-        
-                  </table>
-        
-        </ng-template>
-     
-      </ngb-tab>
-      <ngb-tab>
-        <ng-template ngbTabTitle><b>Title</b></ng-template>
-        <ng-template ngbTabContent>  <table class="table table-active table-hover table-responsive-md table-fixed mt-3">
+          <ng-template ngbTabContent>
 
-            <thead>
+            <table class="table table-active table-hover table-responsive-md table-fixed mt-3">
+
+              <!--Table head-->
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th>Name</th>
+                  <th>Surname</th>
+                  <th>Country</th>
+                  <th>City</th>
+                  <th>Position</th>
+
+                </tr>
+              </thead>
+              <!--Table head-->
+
+              <!--Table body-->
+              <tbody>
+                <tr>
+                  <th scope="row">4</th>
+                  <td>Jerry</td>
+                  <td>Horwitz</td>
+                  <td>Italy</td>
+                  <td>Bari</td>
+                  <td>Editor-in-chief</td>
+
+                </tr>
+                <tr>
+                  <th scope="row">5</th>
+                  <td>Janis</td>
+                  <td>Joplin</td>
+                  <td>Poland</td>
+                  <td>Warsaw</td>
+                  <td>Video Maker</td>
+
+                </tr>
+                <tr>
+                  <th scope="row">6</th>
+                  <td>Gary</td>
+                  <td>Winogrand</td>
+                  <td>Germany</td>
+                  <td>Berlin</td>
+                  <td>Photographer</td>
+
+                </tr>
+                <tr>
+                  <th scope="row">7</th>
+                  <td>Angie</td>
+                  <td>Smith</td>
+                  <td>USA</td>
+                  <td>San Francisco</td>
+                  <td>Teacher</td>
+
+                </tr>
+                <tr>
+                  <th scope="row">8</th>
+                  <td>John</td>
+                  <td>Mattis</td>
+                  <td>France</td>
+                  <td>Paris</td>
+                  <td>Actor</td>
+
+                </tr>
+                <tr>
+                  <th scope="row">9</th>
+                  <td>Otto</td>
+                  <td>Morris</td>
+                  <td>Germany</td>
+                  <td>Munich</td>
+                  <td>Singer</td>
+
+                </tr>
+                <tr>
+                  <th scope="row">9</th>
+                  <td>Otto</td>
+                  <td>Morris</td>
+                  <td>Germany</td>
+                  <td>Munich</td>
+                  <td>Singer</td>
+
+                </tr>
+                <tr>
+                  <th scope="row">9</th>
+                  <td>Otto</td>
+                  <td>Morris</td>
+                  <td>Germany</td>
+                  <td>Munich</td>
+                  <td>Singer</td>
+
+                </tr>
+                <tr>
+                  <th scope="row">9</th>
+                  <td>Otto</td>
+                  <td>Morris</td>
+                  <td>Germany</td>
+                  <td>Munich</td>
+                  <td>Singer</td>
+
+                </tr>
+
+              </tbody>
+              <!--Table body-->
+
+            </table>
+
+          </ng-template>
+
+        </ngb-tab>
+        <ngb-tab>
+          <ng-template ngbTabTitle>
+            <b>Title</b>
+          </ng-template>
+          <ng-template ngbTabContent>
+            <table class="table table-active table-hover table-responsive-md table-fixed mt-3">
+
+              <thead>
                 <tr>
                   <th scope="col">#</th>
                   <th scope="col">First</th>
@@ -330,16 +344,22 @@
                 </tr>
               </tbody>
 
-          </table>
+            </table>
 
-        </ng-template>
-      </ngb-tab>
-      <ngb-tab title="Disabled">
-        <ng-template ngbTabContent>
-          <p>Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
-        </ng-template>
-      </ngb-tab>
-    </ngb-tabset>
+          </ng-template>
+        </ngb-tab>
+        <ngb-tab title="Disabled">
+          <ng-template ngbTabContent>
+            <p>Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi.
+              Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et odio.
+              Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed diam urna,
+              egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim,
+              nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus
+              et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in
+              eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
+          </ng-template>
+        </ngb-tab>
+      </ngb-tabset>
+    </div>
   </div>
-  </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/clients/view-loan/view-loan.component.scss b/src/app/clients/view-loan/view-loan.component.scss
index eaa390c0a..67ce16326 100644
--- a/src/app/clients/view-loan/view-loan.component.scss
+++ b/src/app/clients/view-loan/view-loan.component.scss
@@ -7,6 +7,8 @@
     border:0;
 }
 
-.card-color{
-    background-color:gray;
-}
\ No newline at end of file
+.btn {
+    border: 1px solid #DDD;
+    border-right-width: 0;
+    border-radius: 0;
+  }
\ No newline at end of file