redisgning welcome page

Author: Vishal-raj-1

assets/app/css/main.css

@@ -279,6 +279,29 @@ body {
     background: rgba(255, 255, 255, 0.12);
 }
 
+/*---------------------------------------
+  Welcome Page
+-----------------------------------------*/
+
+#import-json, #open-file, #save-file{
+  border: 2px dashed skyblue;
+  display: inline-block;
+  width: 25%;
+  text-align: center;
+  margin: 6rem 2rem;
+  padding: 1rem;
+  cursor: pointer;
+}
+
+#welcomepage-view i{
+  font-size: 10rem;
+}
+
+#welcomepage-title , .icons{
+  text-align: center;
+}
+
+
 /*---------------------------------------
   DataTables custom
 -----------------------------------------*/

index.html

@@ -118,26 +118,30 @@
             <!-- Welcome Page -->  
             <div class="tab-pane container" id="tab-welcomepage">
                 <div id="welcomepage-container">
-                    <div id="wecomepage-title">
+                    <div id="welcomepage-title">
                         <h1>Welcome to ScanCode Workbench</h1>
                     </div>
                     <div id="welcomepage-view">
-                        <div class="row">
-                            <div class="col-sm-4">
-                                <h3>Start:</h3>
-                                <div class="btn-group-vertical" role="group" aria-label="...">
-                                    <button id="import-json" class="btn btn-lg btn-default"><i class="fa fa-cogs"></i> Import ScanCode JSON</button>
-                                    <button id="open-file" class="btn btn-lg btn-default"><i class="fa fa-folder"></i> Open SQLite File</button>
-                                    <button id="save-file" class="btn btn-lg btn-default"><i class="fa fa-floppy-o"></i> Save SQLite File</button>
-                                </div>
+                        <div class="col icons">
+                            <div id="import-json">
+                                <i class="fa fa-cogs"></i> 
+                                <h4>Import ScanCode JSON</h4>
                             </div>
-                            <div class="col-sm-8">
-                                <h3>Learn and Contribute:</h3>
-                                <div class="btn-group-vertical" role="group" aria-label="...">
-                                    <a href="https://github.com/nexB/scancode-workbench/" class="btn btn-lg btn-default">GitHub Repository</a>
-                                    <a href="https://scancode-workbench.readthedocs.io" class="btn btn-lg btn-default">Documentation</a>
-                                    <a href="https://github.com/nexB/scancode-workbench/issues" class="btn btn-lg btn-default">Report a Bug or Request a Feature</a>
-                                </div>
+                            <div id="open-file">
+                                <i class="fa fa-folder"></i> 
+                                <h4>Open SQLite File</h4>
+                            </div>
+                            <div id="save-file">
+                                <i class="fa fa-floppy-o"></i> 
+                                <h4>Save SQLite File</h4>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <h3>Quick Links: </h3>
+                            <div class="btn-group-horizontal" role="group" aria-label="...">
+                                <a href="https://github.com/nexB/scancode-workbench/" class="btn btn-lg btn-default">GitHub Repository</a>
+                                <a href="https://scancode-workbench.readthedocs.io/" class="btn btn-lg btn-default">Documentation</a>
+                                <a href="https://github.com/nexB/scancode-workbench/issues" class="btn btn-lg btn-default">Report a Bug or Request a Feature</a>
                             </div>
                         </div>
                     </div>