Restyled Game Popularity

dash_plot_generation/assets/styles.css

@@ -7,8 +7,8 @@ body {
     width: 100%;
     background-color: rgb(27,40,56);
     color: rgb(235,235,235);
-
 }
+
 .container-1{
     width: 1200px;
     height: 500px;
@@ -30,7 +30,6 @@ body {
     font-size: 30px;
 }
 
-
 .container-3.container-4 {
     margin-left: 0;
 }
@@ -66,7 +65,6 @@ body {
 
 }
 
-
 .navbar {
     background-color: rgb(23,29,37);
     color: rgb(197,195,192);
@@ -98,6 +96,8 @@ body {
   position: relative;
 }
 
+
+
 .ag-theme-custom-dark {
     --ag-background-color: #ddd !important;
 }
@@ -131,10 +131,8 @@ body {
     border-bottom: 2px solid rgb(37,55,77);
 }
 
-
-/* Track rgb(197,195,192) */
 div.scrollable::-webkit-scrollbar {
-    width: 6px; /* width of the vertical scrollbar */
+    width: 6px;
     height: 6px;
     border-radius: 6px;
 }
@@ -160,4 +158,18 @@ div.scrollable::-webkit-scrollbar-track-piece:end {
 div.scrollable::-webkit-scrollbar-track-piece:start {
     background: rgb(37,55,77);
     margin-top: 10px;
-}
\ No newline at end of file
+}
+
+.text-note-div {
+
+    width: 80%;
+    margin: 30px auto 50px;
+    border-bottom: 1px solid rgb(37,55,77);
+    text-align: center;
+}
+
+.text-note-text {
+    margin-left: 70px;
+    margin-right: 70px;
+    margin-bottom: 20px;
+}

dash_plot_generation/pages/dash_plot_generator.py

@@ -34,7 +34,6 @@ owner_range_dict = {index: val_str for (index, (val, val_str)) in enumerate(OWNE
 min_owner = min(owner_range_dict.keys())
 max_owner = max(owner_range_dict.keys())
 
-
 layout = html.Div(
     children=[
         html.Div(className="row", children=[
@@ -143,13 +142,24 @@ layout = html.Div(
                                          children=[
                                              html.Div(id="Game pop top div",
                                                       children=[
+
+                                                          html.Div(children=[html.P("""The free to play market has taken the 
+                                                          video game market by storm. It is, however, not clear
+                                                          which games in each category are performing the best in terms 
+                                                          of user rating. This section contains tools to analyze the
+                                                          distribution of user ratings for both free and non-free games
+                                                          based on the game amount of owners the games have and on a
+                                                          minimum review amount criteria.""",
+                                                                                    className="text-note-text")],
+                                                                   className='text-note-div'),
                                                           html.Div(id="game popularity filters",
                                                                    style=NORMAL_DIVISION_DICT | {'width': '100%',
                                                                                                  'height': '100%',
                                                                                                  'margin_left': '0px',
                                                                                                  'margin_right': '0px',
                                                                                                  'background-color': TAB_COLOR,
-                                                                                                 'display': 'inline-block'},
+                                                                                                 'display': 'inline-block',
+                                                                                                 'margin-bottom': '10px'},
 
                                                                    children=[
                                                                        html.P("Filters"),
@@ -160,10 +170,21 @@ layout = html.Div(
                                                                                        step=None,
                                                                                        value=[min_owner,
                                                                                               max_owner]),
-                                                                       html.Small("Minimum amount of reviews"),
+                                                                       html.Small("Minimum amount of reviews"
+                                                                                  , style={'vertical-align': 'middle'}),
                                                                        dcc.Input(id=RATING_MIN_REVIEWS,
                                                                                  type="number", min=0,
-                                                                                 max=max_reviews, step=1, value=0)
+                                                                                 max=max_reviews, step=1, value=0,
+                                                                                 style={'background-color': TAB_COLOR,
+                                                                                        'color': WHITE_STEAM,
+                                                                                        'border': '2px solid ' + WHITE_STEAM,
+                                                                                        'width': '80px',
+                                                                                        'height': '20px',
+                                                                                        'vertical-align': 'middle',
+                                                                                        'margin-left': '10px',
+                                                                                        'padding-right': '2px',
+                                                                                        'padding-left': '5px'})
+
                                                                    ]
                                                                    ),
                                                           html.Div(
@@ -310,4 +331,4 @@ dash.register_page(
     title="Dashboard",
     description="Main dashboard",
     path="/dashboard",
-)
\ No newline at end of file
+)

dash_plot_generation/styles_and_handles.py

@@ -51,8 +51,7 @@ DEFAULT_TABS_DICT = {'width': 'auto', 'display': 'flex',
                      'background-color': TAB_COLOR, 'border-color': TAB_EDGE}
 TAB_NORMAL_DICT = {'background-color': TAB_COLOR, 'color': TITLE_WHITE_STEAM,
                    'border': '0px solid',
-                   'font-size': '15px',
-                   'border_bottom': '2px solid ' + TAB_EDGE}
+                   'font-size': '15px'}
 TAB_HIGHLIGHT_DICT = {'backgroundColor': TAB_HEADER_COLOR, 'color': 'white', "border-color": "transparent",
                       'font-size': '15px'}
 PANEL_DEFAULT_DICT = {'display': 'inline-block',