benj design tweaks

src/ui/components/RightBar.css

@@ -1,18 +1,20 @@
 .RightBar {
   position: absolute;
+  transform: translate(0%, 0%);
 
   display:flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
 
-  height: 100vh;
-  width: 6%;
-  left: 94%;
+  height: calc(100vh - 190px);
+  width: 80px;
+  right: 0%;
 
   z-index: 99;
 
   background-color: rgba(77, 77, 77, 0.6);
+  z-index: 99;
 }
 
 .BarImg:hover {
@@ -32,4 +34,16 @@
 
 .RightBar img:hover {
   filter: invert(75%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%);
+}
+
+@media(max-height: 580px) {
+    .RightBar {
+        height: calc(100vh - 180px);
+    }
+}
+
+@media(max-height: 500px) {
+    .RightBar {
+        height: calc(100vh - 170px);
+    }
 }

src/ui/components/ServerLaunchSection.css

@@ -4,19 +4,22 @@
   justify-content: space-between;
 
   position: absolute;
-  left: 60%;
-  top: 5%;
+  transform: translate(0%, -50%);
+  right: 10%;
+  top: 50%;
 
   width: 30%;
-  height: 55%;
+  height: 80%;
+  min-width: 357px;
 }
 
 #playButton > div {
-  margin-top: 4px;
+  margin-bottom: 6px;
 }
 
 #playButton .BigButton {
   height: 100%;
+  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2);
 }
 
 #serverControls {
@@ -36,11 +39,17 @@
 
 #serverControls .CheckboxDisplay {
   margin-right: 6px;
+  box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.2);
 }
 
 #serverControls .Checkbox label {
   color: #fff;
   font-weight: bold;
+  text-shadow: #222222 1px 0 10px;
+}
+
+#serverControls .Checkbox label span {
+  padding-left: 4px;
 }
 
 .ServerLaunchButtons {
@@ -69,6 +78,9 @@
 .ServerConfig input {
   padding: 6px;
   border-radius: 6px;
+  height: 18px;
+
+  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2);
 }
 
 #ip {
@@ -77,4 +89,20 @@
 
 #port {
   width: 15%;
-}
+}
+
+@media (max-width: 1040px) {
+    #playButton {
+        right: 5%;
+    }
+}
+
+@media (max-width: 870px) {
+    #playButton {
+        min-width: 235px;
+    }
+
+    #officialPlay {
+        width: 40%;
+    }
+}

src/ui/components/common/Checkbox.css

@@ -7,7 +7,7 @@
   width: 20px;
 
   border: 2px solid #cecece;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .CheckboxDisplay:hover {

src/ui/components/common/ProgressBar.css

@@ -49,6 +49,10 @@
   color: #fff !important;
 }
 
+.MainProgressBarWrapper .ProgressBar {
+  box-shadow: 0px 0px 5px 4px rgb(0 0 0 / 20%);
+}
+
 .MainProgressBarWrapper:hover {
   cursor: pointer;
 }

src/ui/components/news/NewsSection.css

@@ -1,76 +1,97 @@
 .NewsSection {
-  background-color: rgba(106, 105, 106, 0.6);
+    background-color: rgba(106, 105, 106, 0.6);
 
-  display: flex;
-  flex-direction: column;
-  
-  position: absolute;
+    position: absolute;
 
-  height: 30%;
-  width: 40%;
+    min-height: 219px;
+    height: 30%;
+    width: 512px;
 
-  top: 20%;
-  left: 5%;
+    bottom: 35%;
+    left: 5%;
+}
+
+@media (max-width: 830px) {
+    .NewsSection {
+        width: 61%;
+    }
 }
 
 .NewsTabs {
-  background-color: rgba(77, 77, 77, 0.6);
+    background-color: rgba(77, 77, 77, 0.6);
 
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
 
-  font-weight: bold;
-  color: #fff;
+    font-weight: bold;
+    color: #fff;
 
-  width: 100%;
-  height: 20%;
+    width: 100%;
+    height: 43px;
 }
 
 .NewsTab {
-  height: 50%;
+    height: 50%;
 
-  margin: 0 10px;
+    margin: 0 10px;
 
-  text-align: center;
-  border-bottom: 1px solid transparent;
+    text-align: center;
+    border-bottom: 1px solid transparent;
 }
 
 .NewsTab:hover {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .NewsTab.selected {
-  border-bottom: 2px solid #ffc61e;
+    border-bottom: 2px solid #ffc61e;
 }
 
 .NewsContent {
-  overflow-y: auto;
-  scrollbar-width: none;
-
-  color: #fff;
+    display: block;
+    height: calc(100% - 43px);
+    width: 100%;
+    color: #fff;
 }
 
-.NewsContent::-webkit-scrollbar {
-  display: none;
+.NewsContent tbody {
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+
+    overflow-y: auto;
+    scrollbar-width: none;
+}
+
+.NewsContent  tbody::-webkit-scrollbar {
+    display: none;
 }
 
 .Commit {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-
-  color: #fff;
-
-  margin: 8px;
+    margin: 0;
+    color: #fff;
+    max-height: 42px;
 }
 
 .CommitAuthor {
-  font-weight: bold;
+    width: calc(100% * 0.4);
+    padding-left: 5px;
+    vertical-align: top;
+    font-weight: bold;
 }
 
 .CommitMessage {
-  width: 60%;
-}
+    width: calc(100% * 0.6);
+}
+
+.CommitMessage span {
+    display: -webkit-box;
+    width: 100%;
+    max-height: 42px;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    margin-bottom: 5px;
+}

src/ui/components/news/NewsSection.tsx

@@ -64,10 +64,10 @@ export default class NewsSection extends React.Component<IProps, IState> {
       const commitsList = obj.slice(0, 5)
       const commitsListHtml = commitsList.map((commit: any) => {
         return (
-          <div className="Commit" key={commit.sha}>
-            <div className="CommitAuthor">{commit.commit.author.name}</div>
-            <div className="CommitMessage">{commit.commit.message.substring(0, 50) + '...'}</div>
-          </div>
+          <tr className="Commit" key={commit.sha}>
+            <td className="CommitAuthor"><span>{commit.commit.author.name}</span></td>
+            <td className="CommitMessage"><span>{commit.commit.message}</span></td>
+          </tr>
         )
       })
 
@@ -113,9 +113,11 @@ export default class NewsSection extends React.Component<IProps, IState> {
             <Tr text="news.latest_version" />
           </div>
         </div>
-        <div className="NewsContent">
-          {this.state.news}
-        </div>
+        <table className="NewsContent">
+            <tbody>
+                {this.state.news}
+            </tbody>
+        </table>
       </div>
     )
   }