WIP Layout

src/components/Council/index.tsx

@@ -18,20 +18,16 @@ const Council = (props: {
         <div className="d-flex flex-column">
           <div className="d-flex flex-row">
             {council.slice(0, half).map((seat: Seat) => (
-              <User
-                key={String(seat.member)}
-                id={String(seat.member)}
-                handle={handles[seat.member]}
-              />
+              <div key={String(seat.member)} className="col">
+                <User id={String(seat.member)} handle={handles[seat.member]} />
+              </div>
             ))}
           </div>
           <div className="d-flex flex-row">
             {council.slice(half).map((seat: Seat) => (
-              <User
-                key={String(seat.member)}
-                id={String(seat.member)}
-                handle={handles[seat.member]}
-              />
+              <div key={String(seat.member)} className="col">
+                <User id={String(seat.member)} handle={handles[seat.member]} />
+              </div>
             ))}
           </div>
         </div>

src/components/Dashboard/Nominators.tsx

@@ -9,12 +9,12 @@ const Nominators = (props: { nominators: string[]; handles: Handles }) => {
   const half = Math.floor(nominators.length / 2) + 1;
 
   return (
-    <div className="box">
+    <div className="box col md-5 sm-10">
       <h3>Nominators</h3>
 
       {(nominators.length && (
         <div className="d-flex flex-row">
-          <div className="mx-1">
+          <div className="col">
             {nominators.slice(0, half).map((nominator: string) => (
               <User
                 key={nominator}
@@ -23,7 +23,7 @@ const Nominators = (props: { nominators: string[]; handles: Handles }) => {
               />
             ))}
           </div>
-          <div className="mx-1">
+          <div className="col">
             {nominators.slice(half).map((nominator: string) => (
               <User
                 key={nominator}

src/components/Dashboard/Validators.tsx

@@ -9,12 +9,12 @@ const Validators = (props: { validators: string[]; handles: Handles }) => {
   const third = Math.floor(validators.length / 3) + 1;
 
   return (
-    <div className="box">
+    <div className="box col md-5 sm-10">
       <h3>Validators</h3>
 
       {(validators.length && (
         <div className="d-flex flex-row">
-          <div className="mx-1">
+          <div className="col">
             {validators.slice(0, third).map((validator: string) => (
               <User
                 key={validator}
@@ -23,7 +23,7 @@ const Validators = (props: { validators: string[]; handles: Handles }) => {
               />
             ))}
           </div>
-          <div className="mx-1">
+          <div className="col">
             {validators.slice(third, third * 2).map((validator: string) => (
               <User
                 key={validator}
@@ -32,7 +32,7 @@ const Validators = (props: { validators: string[]; handles: Handles }) => {
               />
             ))}
           </div>
-          <div className="mx-1">
+          <div className="col">
             {validators.slice(third * 2).map((validator: string) => (
               <User
                 key={validator}

src/index.css

@@ -16,13 +16,16 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+a,
 a:link,
-a:active,
-a:visited,
-a:hover {
+a:visited {
   color: #001414;
   text-decoration: none !important;
 }
+a:active,
+a:hover {
+  color: #fff !important;
+}
 
 h3 {
   font-size: 1rem;
@@ -49,5 +52,9 @@ h3 {
 }
 
 .user {
-  min-width: 125px;
+  min-width: 75px;
+}
+
+.tooltip {
+  width: 400px !important;
 }