Github - Fixed Github style

Additionally, moved button css to it's own file, and started button component file.

src/components/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import "./css/App.css";
+import "./css/Buttons.css";
 import Navigation from './Navigation';
 import Github from './Github';
 import Articles from './Articles';

src/components/css/App.css

@@ -34,44 +34,6 @@ html, body {
     height:100%;
 }
 
-.btn {
-    border-style: solid;
-    border-color: #837483;
-    border-radius: 5px;
-    border-width: 1px;
-    background-color: #373747;
-    padding: 6px;
-    display: flex;
-    text-align: center;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-    width: fit-content;
-    cursor: pointer;
-}
-.btn:hover {
-    color: #C3C0C0;
-    background-color: #363643;
-    border-color: #C3C0C0;
-}
-
-.btn.mar-la {
-    margin-left: auto;
-}
-
-.btn.mar-ra {
-    margin-right: auto;
-}
-
-.btn.btn-compact-right {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-.btn.btn-compact-left {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
 @media only screen and (max-width: 600px) {
     .App .app-content {
         margin-bottom: 4rem;

src/components/css/Buttons.css

@@ -0,0 +1,58 @@
+
+.btn {
+    border-style: solid;
+    border-color: #837483;
+    border-radius: 5px;
+    border-width: 1px;
+    background-color: #373747;
+    padding: 6px;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    width: fit-content;
+    cursor: pointer;
+}
+
+.btn:hover {
+    color: #C3C0C0;
+    background-color: #363643;
+    border-color: #C3C0C0;
+}
+
+.btn.toggle {
+    font-size: 32px;
+}
+
+.btn.toggle .on {
+    display: block;
+    height: 32px;
+}
+
+.btn.toggle .off {
+    display:none;
+}
+
+.btn.mar-la {
+    margin-left: auto;
+}
+
+.btn.mar-ra {
+    margin-right: auto;
+}
+
+.btn-compact-container {
+    display:flex;
+    flex-direction: row;
+}
+
+.btn.btn-compact-right {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.btn.btn-compact-left {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}

src/components/css/Github.css

@@ -20,6 +20,11 @@
     font-size: medium;
 }
 
+.Github .select-menu {
+    display:flex;
+    flex-direction: row;
+}
+
 .Github .dropdown-menu option {
     background-color: #5F5F6A;
 }
@@ -129,10 +134,27 @@
 
 @media only screen and (max-width: 600px) {
 
+    .repo-list {
+        width: 100%;
+    }
+
     .repo .content {
         flex-direction: column;
     }
     .repo .times {
         font-size: 16px;  
     }
+
+    .Github .sort-menu {
+        align-items: center;
+        flex-direction: row;
+    }
+
+    .Github .select-menu {
+        flex-direction: row;
+    }
+
+    .Github .sort-menu .btn.toggle {
+        margin-left: auto;
+    }
 }

src/components/subcomponents/Buttons.js

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import '../css/Buttons.css';
+import {ArrowUpShort, ArrowDownShort} from 'react-bootstrap-icons';
+
+/**
+ * Buttons - set of button components that are reusable throughout the app.
+ */
+
+export const ToggleButton = ({
+        defVal=true,
+        icons=[<ArrowUpShort/>, <ArrowDownShort/>],
+        text="",
+        clickAction=()=>{}
+    }) => {
+    /**
+     * ToggleButton - A subcomponent for making lists of content, mostly to make a list of links.
+     */
+
+    const [value, setValue] = useState(defVal);
+
+    return (
+        <div className="btn toggle" onClick={()=>{setValue(!value); clickAction(value);}} >
+            <div className={value?'on':'off'}> {icons[0]} </div>
+            <div className={value?'off':'on'}> {icons[1]} </div>
+        </div>
+    );    
+};

src/components/subcomponents/GithubRepos.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import {getRepos, getUser, getRepoLanguages, nextPage, setSortValue} from '../../actions';
+import { getRepos, getUser, getRepoLanguages, nextPage, setSortValue } from '../../actions';
+import { ToggleButton } from './Buttons';
 
 class GithubRepos extends React.Component {
 
@@ -130,43 +131,36 @@ class GithubRepos extends React.Component {
         return (
           <div className="repo-list">
             <div className="sort-menu">
-              <p>Sort By:&ensp;</p>
+              <div className="select-menu">
-              <select className="dropdown-list" onChange={v=>{
+                <p>Sort By:&ensp;</p>
-                this.props.setSortValue({
+                <select className="dropdown-list" onChange={v=>{
-                  ...this.props.sortedValue,
+                  this.props.setSortValue({
-                  value: v.target.value
+                    ...this.props.sortedValue,
-                });
+                    value: v.target.value
-                }}>
+                  });
-                {
+                  }}>
-                  this.sortOptions.map(option=>{
+                  {
-                    return (
+                    this.sortOptions.map(option=>{
-                      <option
+                      return (
-                        value={option.value}
+                        <option
-                        key={option.value}
+                          value={option.value}
-                        selected={option.value === this.props.sortedValue.value}
+                          key={option.value}
-                        >
+                          selected={option.value === this.props.sortedValue.value}
-                          {option.text}
+                          >
-                      </option>);
+                            {option.text}
-                  })
+                        </option>);
-                }
+                    })
-              </select>
+                  }
+                </select>
+              </div>
               &ensp;
-              <div className="btn btn-compact-left" onClick={()=>{
+              <ToggleButton defVal={false} clickAction={(val)=>{
+                console.warn(val);
                 this.props.setSortValue({
                   ...this.props.sortedValue,
-                  asc: true
+                  asc: val
                 });
-              }}>
+                }} />
-                Ascend
-              </div>
-              <div className="btn btn-compact-right" onClick={()=>{
-                this.props.setSortValue({
-                  ...this.props.sortedValue,
-                  asc: false
-                });
-              }}>
-                Descend
-              </div>
             </div>
 
             {render}