feat: UI redesign

This commit is contained in:
nafunii 2022-01-11 06:43:45 +08:00
parent cfc7fd3170
commit 843daa4242
No known key found for this signature in database
GPG key ID: 0A82862EF6000AE3
3 changed files with 24 additions and 16 deletions

View file

@ -16,7 +16,7 @@ chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript({ chrome.scripting.executeScript({
target: { tabId: tab.id }, target: { tabId: tab.id },
files: ['popup.js'] files: ['popup.js']
}); }, () => chrome.runtime.lastError);
}); });
@ -24,5 +24,5 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
chrome.scripting.executeScript({ chrome.scripting.executeScript({
target: { tabId: tabId }, target: { tabId: tabId },
files: ['onload.js'] files: ['onload.js']
}); }, () => chrome.runtime.lastError);
}); });

View file

@ -18,19 +18,20 @@
</head> </head>
<body> <body>
<div class="row" id="title"> <div id="title">
<div class="inb"><img class="logo" src="images/icon32.png" alt="Github Accentify"></img> <p align="center">
</div> <img width="50" src="https://github.com/nafunii/gh-accentify/blob/main/images/icon16.png?raw=true" alt="Profile Picture">
<div class="inb"> <br> · Gitccentify ·
<h1 class="logo-text"> Gitccentify </h1> <br> v1.0.0</p>
</div> </p>
<hr>
</div> </div>
<div> <form>
<form> <div class="vertcenter">
<label class="inb">Select Your Accent Color:</label> <label for="accent" class="inb">Select Your Accent Color:</label>
<input class="getColor" type="color" name="accent-color" id="accent"> <input class="getColor" type="color" name="accent-color" id="accent">
</form> </div>
</div> </form>
<!-- Scripts --> <!-- Scripts -->
<script src="popup.js"></script> <script src="popup.js"></script>

View file

@ -10,10 +10,11 @@ h1 {
} }
#title { #title {
height: 64px; height: 80px;
background-color: bisque; background-color: rgb(255, 255, 255);
width: 400px; width: 300px;
position: relative; position: relative;
padding: 0 0 20px 0;
} }
.logo { .logo {
@ -35,4 +36,10 @@ h1 {
margin: 10px; margin: 10px;
border: none; border: none;
border-radius: 2px; border-radius: 2px;
}
.vertcenter {
display: flex;
justify-content: center;
align-items: center;
} }