format

SidhuK · Feb 10, 2023 · 63ce292 · 63ce292
1 parent aa8b72d
commit 63ce292
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/app.R b/app.R
@@ -136,7 +136,7 @@ ui <- fluidPage(
     actionButton(
       "get_heatmap",
       "Generate Heatmap",
-      class = "btn btn-primary"
+      class = "btn btn-primary btn-block"
     )
   ),
   mainPanel(
@@ -158,7 +158,7 @@ ui <- fluidPage(
       The user-supplied data can be viewed in its raw form in the 'Data' tab for added transparency."),
         p("The MetaboHeatmap app is hosted on both shinyapps.io and GitHub,
        providing access through a web-based platform or by downloading and
-       running the app locally through RStudio. The application can be accessed on
+       running the app locally through RStudio/VSCode or IDE of your choice. The application can be accessed on
        shinyapps.io at https://karatsidhu.shinyapps.io/metaboheatmap/ and on
        GitHub at https://github.com/sidhuk/metaboheatmap/."),
         h3("Useful Links"),
@@ -192,7 +192,7 @@ right click on the image and select 'Save Image As...' and save as a PNG file. A
             width = "1000px",
             height = "1500px"
           ),
-          downloadButton(outputId = "download", label = "Download Heatmap")
+          downloadButton(outputId = "download", label = "Download Heatmap", class = "btn btn-primary btn-block")
         ))
       ),
       tabPanel(

diff --git a/www/styles.css b/www/styles.css
@@ -1,7 +1,4 @@
-/* import fira sans condensed */
 @import url("https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap");
-
-/* import Lilita One from the google api */
 @import url("https://fonts.googleapis.com/css2?family=Viga&display=swap");
 
 h1 {
@@ -16,7 +13,7 @@ h1 {
 
 h2 {
   font-family: "Viga", serif;
-  font-size: 2.5em;
+  font-size: 2.2em;
   font-weight: 700;
   color: #d95c3a;
   text-align: center;
@@ -26,7 +23,7 @@ h2 {
 
 h3 {
   font-family: "Viga", serif;
-  font-size: 2em;
+  font-size: 1.8em;
   font-weight: 700;
   color: #d95c3a;
   text-align: center;
@@ -62,7 +59,13 @@ p {
   padding: 0;
 }
 
-/* make the body a different color, add some great formatting */
+a {
+  color: #d95c3a;
+  text-decoration: none;
+  font-family: "Fira Sans", sans-serif;
+  font-size: 1.2em;
+  line-height: 1.6;
+}
 
 body {
   font-family: "Fira Sans", Helvetica, sans-serif;
@@ -73,16 +76,12 @@ body {
   border: 4px solid #d95c3a;
 }
 
-/* change the color of active class and tab*/
-
 .nav {
   background-color: #ececec;
   color: #ffffff;
   border-radius: 10px;
 }
 
-/* make the page footer awesome */
-
 .page-footer {
   border-radius: 10px;
   text-align: center;
@@ -91,6 +90,7 @@ body {
 .help-block {
   color: #d95c3a;
   text-align: center;
+  font-weight: 500;
 }
 
 .btn-primary {
@@ -103,19 +103,33 @@ body {
 .container-fluid {
   background-color: #ececec;
   border-radius: 15px;
+  border-width: 1px;
+  border-color: #2e2e2e;
 }
 
 .well {
   background-color: #f5d4cc;
   border-radius: 10px;
+  border-color: #2e2e2e;
+  border-width: 1px;
 }
 
-/* id download change and make it better */
-
 #download {
   background-color: #d95c3a;
   border-radius: 10px;
   color: #ffffff;
   text-align: center;
   padding: 10px;
 }
+
+.nav-tabs > li {
+  background: #ececec;
+  border-radius: 10px;
+}
+
+.nav-tabs > li.active > a {
+  background: #ffffff;
+  border-radius: 10px;
+  border-width: 1px;
+  border-color: #2e2e2e;
+}