benj design tweaks

src/ui/App.css

@@ -10,8 +10,10 @@ body {
 }
 
 .App {
-  background-image: url("https://webstatic.hoyoverse.com/upload/event/2020/11/04/7fd661b5184e1734f91f628b6f89a31f_7367318474207189623.png");
+  background: url("https://webstatic.hoyoverse.com/upload/event/2020/11/04/7fd661b5184e1734f91f628b6f89a31f_7367318474207189623.png") no-repeat center center fixed; 
-  background-repeat: no-repeat;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
   background-size: cover;
 }
 
@@ -35,7 +37,8 @@ body {
 
 #DownloadProgress {
   position: absolute;
-  top: 15%;
+  transform: translate(0%, -50%);
+  top: 50%;
   left: 5%;
   width: 50%;
 }
@@ -63,11 +66,28 @@ body {
 
 .BottomSection {
   position: absolute;
-  top: 80%;
+	bottom: 0%;
+	left: 50%;
+	transform: translate(-50%, 0%);
 
-  height: 30%;
+	width: 100%;
-  width: 100%;
+	height: 160px;
 
-  backdrop-filter: blur(8px);
+  backdrop-filter: blur(10px);
   box-shadow: inset 0px 5px 12px -3px rgb(50 50 50 / 75%);
+
+	margin: 0;
+	padding: 0;
+}
+
+@media(max-height: 580px) {
+    .BottomSection {
+        height: 150px;
+    }
+}
+
+@media(max-height: 500px) {
+    .BottomSection {
+        height: 140px;
+    }
 }

src/ui/App.tsx

@@ -16,14 +16,14 @@ import NewsSection from './components/news/NewsSection'
 import RightBar from './components/RightBar'
 
 interface IProps {
-  [key: string]: never;
+    [key: string]: never;
 }
 
 interface IState {
-  isDownloading: boolean;
+    isDownloading: boolean;
-  optionsOpen: boolean;
+    optionsOpen: boolean;
-  miniDownloadsOpen: boolean;
+    miniDownloadsOpen: boolean;
-  downloadsOpen: boolean;
+    downloadsOpen: boolean;
 }
 
 const downloadHandler = new DownloadHandler()
@@ -35,7 +35,7 @@ class App extends React.Component<IProps, IState> {
       isDownloading: false,
       optionsOpen: false,
       miniDownloadsOpen: false,
-      downloadsOpen: false
+      downloadsOpen: false,
     }
 
     listen('lang_error', (payload) => {
@@ -59,25 +59,38 @@ class App extends React.Component<IProps, IState> {
 
         {
           // Mini downloads section
-          this.state.miniDownloadsOpen ? 
+          this.state.miniDownloadsOpen ? (
             <div className="MiniDownloads">
-              <MiniDialog title="Downloads" closeFn={() => {
+              <MiniDialog
-                this.setState({ miniDownloadsOpen: false })
+                title="Downloads"
-              }}>
+                closeFn={() => {
+                  this.setState({ miniDownloadsOpen: false })
+                }}
+              >
                 <DownloadList downloadManager={downloadHandler} />
               </MiniDialog>
               <div className="arrow-down"></div>
-            </div> : null
+            </div>
+          ) : null
         }
 
         {
           // Download menu
-          this.state.downloadsOpen ? <Downloads downloadManager={downloadHandler} closeFn={() => this.setState({ downloadsOpen: false }) } /> : null
+          this.state.downloadsOpen ? (
+            <Downloads
+              downloadManager={downloadHandler}
+              closeFn={() => this.setState({ downloadsOpen: false })}
+            />
+          ) : null
         }
 
         {
           // Options menu
-          this.state.optionsOpen ? <Options closeFn={() => this.setState({ optionsOpen: !this.state.optionsOpen })}/> : null
+          this.state.optionsOpen ? (
+            <Options
+              closeFn={() => this.setState({ optionsOpen: !this.state.optionsOpen })}
+            />
+          ) : null
         }
 
         <div className="BottomSection">

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;
+  height: calc(100vh - 190px);
-  width: 6%;
+  width: 80px;
-  left: 94%;
+  right: 0%;
 
   z-index: 99;
 
   background-color: rgba(77, 77, 77, 0.6);
+  z-index: 99;
 }
 
 .BarImg:hover {
@@ -33,3 +35,15 @@
 .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%;
+  transform: translate(0%, -50%);
-  top: 5%;
+  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 {
@@ -78,3 +90,19 @@
 #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;
+    position: absolute;
-  flex-direction: column;
 
-  position: absolute;
+    min-height: 219px;
+    height: 30%;
+    width: 512px;
 
-  height: 30%;
+    bottom: 35%;
-  width: 40%;
+    left: 5%;
+}
 
-  top: 20%;
+@media (max-width: 830px) {
-  left: 5%;
+    .NewsSection {
+        width: 61%;
+    }
 }
 
 .NewsTabs {
-  background-color: rgba(77, 77, 77, 0.6);
+    background-color: rgba(77, 77, 77, 0.6);
 
-  display: flex;
+    display: flex;
-  flex-direction: row;
+    flex-direction: row;
-  justify-content: space-around;
+    justify-content: space-around;
-  align-items: center;
+    align-items: center;
 
-  font-weight: bold;
+    font-weight: bold;
-  color: #fff;
+    color: #fff;
 
-  width: 100%;
+    width: 100%;
-  height: 20%;
+    height: 43px;
 }
 
 .NewsTab {
-  height: 50%;
+    height: 50%;
 
-  margin: 0 10px;
+    margin: 0 10px;
 
-  text-align: center;
+    text-align: center;
-  border-bottom: 1px solid transparent;
+    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;
+    display: block;
-  scrollbar-width: none;
+    height: calc(100% - 43px);
-
+    width: 100%;
-  color: #fff;
+    color: #fff;
 }
 
-.NewsContent::-webkit-scrollbar {
+.NewsContent tbody {
-  display: none;
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+
+    overflow-y: auto;
+    scrollbar-width: none;
+}
+
+.NewsContent  tbody::-webkit-scrollbar {
+    display: none;
 }
 
 .Commit {
-  display: flex;
+    margin: 0;
-  flex-direction: row;
+    color: #fff;
-  justify-content: space-between;
+    max-height: 42px;
-  align-items: flex-start;
-
-  color: #fff;
-
-  margin: 8px;
 }
 
 .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}>
+          <tr className="Commit" key={commit.sha}>
-            <div className="CommitAuthor">{commit.commit.author.name}</div>
+            <td className="CommitAuthor"><span>{commit.commit.author.name}</span></td>
-            <div className="CommitMessage">{commit.commit.message.substring(0, 50) + '...'}</div>
+            <td className="CommitMessage"><span>{commit.commit.message}</span></td>
-          </div>
+          </tr>
         )
       })
 
@@ -113,9 +113,11 @@ export default class NewsSection extends React.Component<IProps, IState> {
             <Tr text="news.latest_version" />
           </div>
         </div>
-        <div className="NewsContent">
+        <table className="NewsContent">
-          {this.state.news}
+            <tbody>
-        </div>
+                {this.state.news}
+            </tbody>
+        </table>
       </div>
     )
   }