update bootstrap to version 5 (#158)
* chore: update bootstrap to version 5 * chore: fix lint * merge master * update components to use bootstrap 5
This commit is contained in:
Juan Sebastian velez Posada
committed by
GitHub
GitHub
parent
ca79adc4e5
commit
3406e1c647
@@ -30,22 +30,22 @@ describe('MainList', () => {
|
||||
class="list-group"
|
||||
>
|
||||
<a
|
||||
class="list-group-item"
|
||||
class="list-group-item text-body-secondary"
|
||||
href="#"
|
||||
>
|
||||
<i
|
||||
class="fa fa-fw fa-cogs"
|
||||
class="fa fa-fw fa-cogs me-2"
|
||||
/>
|
||||
Options
|
||||
</a>
|
||||
<a
|
||||
class="list-group-item"
|
||||
class="list-group-item text-body-secondary"
|
||||
href="https://wakatime.com/login"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<i
|
||||
class="fa fa-fw fa-sign-in"
|
||||
class="fa fa-fw fa-sign-in me-2"
|
||||
/>
|
||||
Login
|
||||
</a>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import changeExtensionState from '../utils/changeExtensionState';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { configLogout, setLoggingEnabled } from '../reducers/configReducer';
|
||||
import { userLogout } from '../reducers/currentUser';
|
||||
import { ReduxSelector } from '../types/store';
|
||||
import { User } from '../types/user';
|
||||
import changeExtensionState from '../utils/changeExtensionState';
|
||||
|
||||
export interface MainListProps {
|
||||
loggingEnabled: boolean;
|
||||
@@ -51,7 +51,7 @@ export default function MainList({
|
||||
<blockquote>
|
||||
<p>{totalTimeLoggedToday}</p>
|
||||
<small>
|
||||
<cite>TOTAL TIME LOGGED TODAY</cite>
|
||||
<cite className="text-body-secondary">TOTAL TIME LOGGED TODAY</cite>
|
||||
</small>
|
||||
</blockquote>
|
||||
</div>
|
||||
@@ -61,7 +61,11 @@ export default function MainList({
|
||||
<div className="row">
|
||||
<div className="col-xs-12">
|
||||
<p>
|
||||
<a href="#" onClick={disableLogging} className="btn btn-danger btn-block">
|
||||
<a
|
||||
href="#"
|
||||
onClick={disableLogging}
|
||||
className="btn btn-danger btn-block w-100 btn-sm"
|
||||
>
|
||||
Disable logging
|
||||
</a>
|
||||
</p>
|
||||
@@ -72,7 +76,11 @@ export default function MainList({
|
||||
<div className="row">
|
||||
<div className="col-xs-12">
|
||||
<p>
|
||||
<a href="#" onClick={enableLogging} className="btn btn-success btn-block">
|
||||
<a
|
||||
href="#"
|
||||
onClick={enableLogging}
|
||||
className="btn btn-success btn-block w-100 btn-sm"
|
||||
>
|
||||
Enable logging
|
||||
</a>
|
||||
</p>
|
||||
@@ -80,14 +88,14 @@ export default function MainList({
|
||||
</div>
|
||||
)}
|
||||
<div className="list-group">
|
||||
<a href="#" className="list-group-item" onClick={openOptionsPage}>
|
||||
<i className="fa fa-fw fa-cogs"></i>
|
||||
<a href="#" className="list-group-item text-body-secondary" onClick={openOptionsPage}>
|
||||
<i className="fa fa-fw fa-cogs me-2"></i>
|
||||
Options
|
||||
</a>
|
||||
{user && (
|
||||
<div>
|
||||
<a href="#" className="list-group-item" onClick={logoutUser}>
|
||||
<i className="fa fa-fw fa-sign-out"></i>
|
||||
<a href="#" className="list-group-item text-body-secondary" onClick={logoutUser}>
|
||||
<i className="fa fa-fw fa-sign-out me-2"></i>
|
||||
Logout
|
||||
</a>
|
||||
</div>
|
||||
@@ -97,9 +105,9 @@ export default function MainList({
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href="https://wakatime.com/login"
|
||||
className="list-group-item"
|
||||
className="list-group-item text-body-secondary"
|
||||
>
|
||||
<i className="fa fa-fw fa-sign-in"></i>
|
||||
<i className="fa fa-fw fa-sign-in me-2"></i>
|
||||
Login
|
||||
</a>
|
||||
)}
|
||||
|
||||
@@ -18,102 +18,109 @@ describe('NavBar', () => {
|
||||
expect(container).toMatchInlineSnapshot(`
|
||||
<div>
|
||||
<nav
|
||||
class="navbar navbar-default"
|
||||
class="navbar shadow-none"
|
||||
role="navigation"
|
||||
>
|
||||
<div
|
||||
class="container-fluid"
|
||||
class="navbar-header d-flex w-100 justify-content-between"
|
||||
>
|
||||
<div
|
||||
class="navbar-header"
|
||||
<a
|
||||
class="navbar-brand"
|
||||
href="https://wakatime.com"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<button
|
||||
class="navbar-toggle collapsed"
|
||||
data-target="#bs-example-navbar-collapse-1"
|
||||
data-toggle="collapse"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="sr-only"
|
||||
>
|
||||
Toggle navigation
|
||||
</span>
|
||||
<i
|
||||
class="fa fa-fw fa-cogs"
|
||||
/>
|
||||
</button>
|
||||
<a
|
||||
class="navbar-brand"
|
||||
href="https://wakatime.com"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="graphics/wakatime-logo-48.png"
|
||||
/>
|
||||
<div>
|
||||
WakaTime
|
||||
<img
|
||||
src="graphics/wakatime-logo-48.png"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="collapse navbar-collapse"
|
||||
id="bs-example-navbar-collapse-1"
|
||||
</div>
|
||||
</a>
|
||||
<button
|
||||
aria-controls="userInfoCollapse"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
class="navbar-toggler"
|
||||
data-bs-target="#userInfoCollapse"
|
||||
data-bs-toggle="collapse"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="sr-only"
|
||||
>
|
||||
Toggle navigation
|
||||
</span>
|
||||
<i
|
||||
class="fa fa-fw fa-cogs"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="collapse navbar-collapse mt-4"
|
||||
id="userInfoCollapse"
|
||||
>
|
||||
<div />
|
||||
<ul
|
||||
class="nav navbar-nav border-bottom pb-2"
|
||||
>
|
||||
<div />
|
||||
<ul
|
||||
class="nav navbar-nav"
|
||||
<div />
|
||||
<li
|
||||
class="dropdown"
|
||||
>
|
||||
<div />
|
||||
<div />
|
||||
<li
|
||||
class="dropdown"
|
||||
<a
|
||||
aria-expanded="false"
|
||||
class="dropdown-toggle text-body-secondary link-underline link-underline-opacity-0 d-flex w-100 align-items-center"
|
||||
data-bs-toggle="dropdown"
|
||||
href="#"
|
||||
role="button"
|
||||
>
|
||||
<a
|
||||
aria-expanded="false"
|
||||
class="dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
href="#"
|
||||
role="button"
|
||||
<i
|
||||
class="fa fa-fw fa-info me-2"
|
||||
/>
|
||||
About
|
||||
<span
|
||||
class="caret"
|
||||
/>
|
||||
</a>
|
||||
<ul
|
||||
class="dropdown-menu shadow-none ms-4"
|
||||
role="menu"
|
||||
>
|
||||
<li
|
||||
class="mb-2"
|
||||
>
|
||||
<i
|
||||
class="fa fa-fw fa-info"
|
||||
/>
|
||||
About
|
||||
<span
|
||||
class="caret"
|
||||
/>
|
||||
</a>
|
||||
<ul
|
||||
class="dropdown-menu"
|
||||
role="menu"
|
||||
<a
|
||||
class="text-body-secondary link-underline link-underline-opacity-0 d-flex w-100 align-items-center"
|
||||
href="https://github.com/wakatime/chrome-wakatime/issues"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<i
|
||||
class="fa fa-fw fa-bug me-2"
|
||||
/>
|
||||
Report an Issue
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="mb-2"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/wakatime/chrome-wakatime/issues"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<i
|
||||
class="fa fa-fw fa-bug"
|
||||
/>
|
||||
Report an Issue
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/wakatime/chrome-wakatime"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<i
|
||||
class="fa fa-fw fa-github"
|
||||
/>
|
||||
View on GitHub
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
class="text-body-secondary link-underline link-underline-opacity-0 d-flex w-100 align-items-center"
|
||||
href="https://github.com/wakatime/chrome-wakatime"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<i
|
||||
class="fa fa-fw fa-github me-2"
|
||||
/>
|
||||
View on GitHub
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function NavBar(): JSX.Element {
|
||||
const signedInAs = () => {
|
||||
if (user) {
|
||||
return (
|
||||
<p className="navbar-text">
|
||||
<p className="text-secondary">
|
||||
Signed in as <b>{user.full_name}</b>
|
||||
</p>
|
||||
);
|
||||
@@ -23,9 +23,14 @@ export default function NavBar(): JSX.Element {
|
||||
const customRules = () => {
|
||||
if (user) {
|
||||
return (
|
||||
<li>
|
||||
<a target="_blank" href="https://wakatime.com/settings/rules" rel="noreferrer">
|
||||
<i className="fa fa-fw fa-filter"></i>
|
||||
<li className="mb-2">
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://wakatime.com/settings/rules"
|
||||
rel="noreferrer"
|
||||
className="text-body-secondary link-underline link-underline-opacity-0 d-flex w-100 align-items-center"
|
||||
>
|
||||
<i className="fa fa-fw fa-filter me-2"></i>
|
||||
Custom Rules
|
||||
</a>
|
||||
</li>
|
||||
@@ -38,9 +43,14 @@ export default function NavBar(): JSX.Element {
|
||||
const dashboard = () => {
|
||||
if (user) {
|
||||
return (
|
||||
<li>
|
||||
<a target="_blank" href="https://wakatime.com/dashboard" rel="noreferrer">
|
||||
<i className="fa fa-fw fa-tachometer"></i>
|
||||
<li className="mb-2">
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://wakatime.com/dashboard"
|
||||
rel="noreferrer"
|
||||
className="text-body-secondary link-underline link-underline-opacity-0 d-flex w-100 align-items-center"
|
||||
>
|
||||
<i className="fa fa-fw fa-tachometer me-2"></i>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
@@ -51,65 +61,69 @@ export default function NavBar(): JSX.Element {
|
||||
};
|
||||
|
||||
return (
|
||||
<nav className="navbar navbar-default" role="navigation">
|
||||
<div className="container-fluid">
|
||||
<div className="navbar-header">
|
||||
<button
|
||||
type="button"
|
||||
className="navbar-toggle collapsed"
|
||||
data-toggle="collapse"
|
||||
data-target="#bs-example-navbar-collapse-1"
|
||||
>
|
||||
<span className="sr-only">Toggle navigation</span>
|
||||
<i className="fa fa-fw fa-cogs"></i>
|
||||
</button>
|
||||
<a target="_blank" className="navbar-brand" href="https://wakatime.com" rel="noreferrer">
|
||||
WakaTime
|
||||
<img src="graphics/wakatime-logo-48.png" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||
{signedInAs()}
|
||||
<ul className="nav navbar-nav">
|
||||
{customRules()}
|
||||
{dashboard()}
|
||||
<li className="dropdown">
|
||||
<a
|
||||
href="#"
|
||||
className="dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
role="button"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="fa fa-fw fa-info"></i>
|
||||
About
|
||||
<span className="caret"></span>
|
||||
</a>
|
||||
<ul className="dropdown-menu" role="menu">
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/wakatime/chrome-wakatime/issues"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<i className="fa fa-fw fa-bug"></i>
|
||||
Report an Issue
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/wakatime/chrome-wakatime"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<i className="fa fa-fw fa-github"></i>
|
||||
View on GitHub
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<nav className="navbar shadow-none" role="navigation">
|
||||
<div className="navbar-header d-flex w-100 justify-content-between">
|
||||
<a target="_blank" className="navbar-brand" href="https://wakatime.com" rel="noreferrer">
|
||||
<img src="graphics/wakatime-logo-48.png" />
|
||||
<div>WakaTime</div>
|
||||
</a>
|
||||
<button
|
||||
className="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#userInfoCollapse"
|
||||
aria-controls="userInfoCollapse"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span className="sr-only">Toggle navigation</span>
|
||||
<i className="fa fa-fw fa-cogs"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="collapse navbar-collapse mt-4" id="userInfoCollapse">
|
||||
{signedInAs()}
|
||||
<ul className="nav navbar-nav border-bottom pb-2">
|
||||
{customRules()}
|
||||
{dashboard()}
|
||||
<li className="dropdown">
|
||||
<a
|
||||
href="#"
|
||||
className="dropdown-toggle text-body-secondary link-underline link-underline-opacity-0 d-flex w-100 align-items-center"
|
||||
data-bs-toggle="dropdown"
|
||||
role="button"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="fa fa-fw fa-info me-2"></i>
|
||||
About
|
||||
<span className="caret"></span>
|
||||
</a>
|
||||
<ul className="dropdown-menu shadow-none ms-4" role="menu">
|
||||
<li className="mb-2">
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/wakatime/chrome-wakatime/issues"
|
||||
rel="noreferrer"
|
||||
className="text-body-secondary link-underline link-underline-opacity-0 d-flex w-100 align-items-center"
|
||||
>
|
||||
<i className="fa fa-fw fa-bug me-2"></i>
|
||||
Report an Issue
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/wakatime/chrome-wakatime"
|
||||
rel="noreferrer"
|
||||
className="text-body-secondary link-underline link-underline-opacity-0 d-flex w-100 align-items-center"
|
||||
>
|
||||
<i className="fa fa-fw fa-github me-2"></i>
|
||||
View on GitHub
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { Toast } from 'bootstrap';
|
||||
import classNames from 'classnames';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import config, { SuccessOrFailType } from '../config/config';
|
||||
import apiKeyInvalid from '../utils/apiKey';
|
||||
import { logUserIn } from '../utils/user';
|
||||
import Alert from './Alert';
|
||||
import SitesList from './SitesList';
|
||||
|
||||
interface State {
|
||||
@@ -11,7 +12,6 @@ interface State {
|
||||
apiKey: string;
|
||||
apiUrl: string;
|
||||
blacklist: string;
|
||||
displayAlert: boolean;
|
||||
hostname: string;
|
||||
loading: boolean;
|
||||
loggingStyle: string;
|
||||
@@ -28,7 +28,6 @@ export default function Options(): JSX.Element {
|
||||
apiKey: '',
|
||||
apiUrl: config.apiUrl,
|
||||
blacklist: '',
|
||||
displayAlert: false,
|
||||
hostname: '',
|
||||
loading: false,
|
||||
loggingStyle: config.loggingStyle,
|
||||
@@ -39,6 +38,8 @@ export default function Options(): JSX.Element {
|
||||
whitelist: '',
|
||||
});
|
||||
|
||||
const liveToastRef = useRef(null);
|
||||
|
||||
const loggingStyleRef = useRef(null);
|
||||
|
||||
const restoreSettings = async (): Promise<void> => {
|
||||
@@ -82,14 +83,6 @@ export default function Options(): JSX.Element {
|
||||
void restoreSettings();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (state.displayAlert) {
|
||||
setTimeout(function () {
|
||||
setState({ ...state, displayAlert: false, loading: false });
|
||||
}, 2500);
|
||||
}
|
||||
}, [state.displayAlert]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (state.loading) return;
|
||||
setState({ ...state, loading: true });
|
||||
@@ -130,7 +123,6 @@ export default function Options(): JSX.Element {
|
||||
apiKey,
|
||||
apiUrl,
|
||||
blacklist,
|
||||
displayAlert: true,
|
||||
hostname,
|
||||
loggingStyle,
|
||||
loggingType,
|
||||
@@ -139,6 +131,8 @@ export default function Options(): JSX.Element {
|
||||
trackSocialMedia,
|
||||
whitelist,
|
||||
});
|
||||
// eslint-disable-next-line
|
||||
Toast.getOrCreateInstance(liveToastRef?.current ?? '')?.show();
|
||||
await logUserIn(state.apiKey);
|
||||
};
|
||||
|
||||
@@ -183,20 +177,6 @@ export default function Options(): JSX.Element {
|
||||
);
|
||||
};
|
||||
|
||||
const alert = () => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: state.displayAlert ? 55 : 0,
|
||||
opacity: state.displayAlert ? 1 : 0,
|
||||
transition: 'opacity 500ms, height 1000ms',
|
||||
}}
|
||||
>
|
||||
<Alert key={state.alertText} type={state.alertType} text={state.alertText} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const isApiKeyValid = apiKeyInvalid(state.apiKey) === '';
|
||||
|
||||
return (
|
||||
@@ -211,114 +191,108 @@ export default function Options(): JSX.Element {
|
||||
>
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
{alert()}
|
||||
|
||||
<form className="form-horizontal">
|
||||
<div className="form-group">
|
||||
<label className="col-lg-2 control-label">API Key</label>
|
||||
|
||||
<div className="col-lg-10">
|
||||
<input
|
||||
autoFocus={true}
|
||||
type="text"
|
||||
className={`form-control ${isApiKeyValid ? '' : 'border-danger'}`}
|
||||
placeholder="API key"
|
||||
value={state.apiKey}
|
||||
onChange={(e) => setState({ ...state, apiKey: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group mb-4">
|
||||
<label htmlFor="apiKey" className="form-label mb-0">
|
||||
API Key
|
||||
</label>
|
||||
<input
|
||||
id="apiKey"
|
||||
autoFocus={true}
|
||||
type="text"
|
||||
className={`form-control ${isApiKeyValid ? '' : 'is-invalid'}`}
|
||||
placeholder="API key"
|
||||
value={state.apiKey}
|
||||
onChange={(e) => setState({ ...state, apiKey: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="col-lg-2 control-label">Logging style!</label>
|
||||
|
||||
<div className="col-lg-10">
|
||||
<select
|
||||
ref={loggingStyleRef}
|
||||
className="form-control"
|
||||
value={state.loggingStyle}
|
||||
onChange={(e) => setState({ ...state, loggingStyle: e.target.value })}
|
||||
>
|
||||
<option value="blacklist">All except blacklisted sites</option>
|
||||
<option value="whitelist">Only whitelisted sites</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group mb-4">
|
||||
<label htmlFor="loggingStyle" className="form-label">
|
||||
Logging style
|
||||
</label>
|
||||
<select
|
||||
id="loggingStyle"
|
||||
ref={loggingStyleRef}
|
||||
className="form-control"
|
||||
value={state.loggingStyle}
|
||||
onChange={(e) => setState({ ...state, loggingStyle: e.target.value })}
|
||||
>
|
||||
<option value="blacklist">All except blacklisted sites</option>
|
||||
<option value="whitelist">Only whitelisted sites</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{loggingStyle()}
|
||||
|
||||
<div className="form-group">
|
||||
<label className="col-lg-2 control-label">Logging type</label>
|
||||
|
||||
<div className="col-lg-10">
|
||||
<select
|
||||
className="form-control"
|
||||
value={state.loggingType}
|
||||
onChange={(e) => setState({ ...state, loggingType: e.target.value })}
|
||||
>
|
||||
<option value="domain">Only the domain</option>
|
||||
<option value="url">Entire URL</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group mb-4">
|
||||
<label htmlFor="loggingType" className="form-label">
|
||||
Logging type
|
||||
</label>
|
||||
<select
|
||||
id="loggingType"
|
||||
className="form-control"
|
||||
value={state.loggingType}
|
||||
onChange={(e) => setState({ ...state, loggingType: e.target.value })}
|
||||
>
|
||||
<option value="domain">Only the domain</option>
|
||||
<option value="url">Entire URL</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="theme" className="col-lg-2 control-label">
|
||||
<div className="form-group mb-4">
|
||||
<label htmlFor="selectTheme" className="form-label mb-0">
|
||||
Theme
|
||||
</label>
|
||||
|
||||
<div className="col-lg-10">
|
||||
<select
|
||||
className="form-control"
|
||||
value={state.theme}
|
||||
onChange={(e) => setState({ ...state, theme: e.target.value })}
|
||||
>
|
||||
<option value="light">Light</option>
|
||||
<option value="dark">Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
<select
|
||||
id="selectTheme"
|
||||
className="form-control"
|
||||
value={state.theme}
|
||||
onChange={(e) => setState({ ...state, theme: e.target.value })}
|
||||
>
|
||||
<option value="light">Light</option>
|
||||
<option value="dark">Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="theme" className="col-lg-2 control-label">
|
||||
<div className="form-group mb-4">
|
||||
<label htmlFor="selectHost" className="form-label mb-0">
|
||||
Hostname
|
||||
</label>
|
||||
|
||||
<div className="col-lg-10">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={state.hostname}
|
||||
onChange={(e) => setState({ ...state, hostname: e.target.value })}
|
||||
/>
|
||||
<span className="help-block">
|
||||
Optional name of local machine. By default 'Unknown Hostname'.
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
id="selectHost"
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={state.hostname}
|
||||
onChange={(e) => setState({ ...state, hostname: e.target.value })}
|
||||
/>
|
||||
<span className="text-secondary">
|
||||
Optional name of local machine. By default 'Unknown Hostname'.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="theme" className="col-lg-2 control-label">
|
||||
<div className="form-group mb-4">
|
||||
<label htmlFor="apiUrl" className="form-label mb-0">
|
||||
API Url
|
||||
</label>
|
||||
|
||||
<div className="col-lg-10">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={state.apiUrl}
|
||||
onChange={(e) => setState({ ...state, apiUrl: e.target.value })}
|
||||
placeholder="https://api.wakatime.com/api/v1"
|
||||
/>
|
||||
<span className="help-block">https://api.wakatime.com/api/v1</span>
|
||||
</div>
|
||||
<input
|
||||
id="apiUrl"
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={state.apiUrl}
|
||||
onChange={(e) => setState({ ...state, apiUrl: e.target.value })}
|
||||
placeholder="https://api.wakatime.com/api/v1"
|
||||
/>
|
||||
<span className="help-block">https://api.wakatime.com/api/v1</span>
|
||||
</div>
|
||||
|
||||
<div className="form-group row">
|
||||
<div className="form-group row mb-4">
|
||||
<div className="col-lg-10 col-lg-offset-2 space-between align-items-center">
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="me-2"
|
||||
checked={state.trackSocialMedia}
|
||||
onChange={toggleSocialMedia}
|
||||
/>
|
||||
@@ -327,8 +301,8 @@ export default function Options(): JSX.Element {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm"
|
||||
data-toggle="modal"
|
||||
data-target="#socialSitesModal"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#socialSitesModal"
|
||||
>
|
||||
Sites
|
||||
</button>
|
||||
@@ -341,17 +315,15 @@ export default function Options(): JSX.Element {
|
||||
<div className="modal-dialog" role="document">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<button
|
||||
type="button"
|
||||
className="close"
|
||||
data-dismiss="modal"
|
||||
aria-label="Close"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 className="modal-title" id="socialSitesModalLabel">
|
||||
<h4 className="modal-title fs-5" id="socialSitesModalLabel">
|
||||
Social Media Sites
|
||||
</h4>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<SitesList
|
||||
@@ -368,7 +340,7 @@ export default function Options(): JSX.Element {
|
||||
/>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn btn-primary" data-dismiss="modal">
|
||||
<button type="button" className="btn btn-primary" data-bs-dismiss="modal">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
@@ -378,8 +350,8 @@ export default function Options(): JSX.Element {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<div className="col-lg-10 col-lg-offset-2">
|
||||
<div className="form-group mb-4">
|
||||
<div className="d-grid gap-2 col-6 ">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-primary ${state.loading ? 'disabled' : ''}`}
|
||||
@@ -391,6 +363,30 @@ export default function Options(): JSX.Element {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="toast-container position-fixed bottom-0 end-0 p-3">
|
||||
<div
|
||||
className={classNames(
|
||||
'toast align-items-center justify-content-between alert',
|
||||
`alert-${state.alertType}`,
|
||||
)}
|
||||
role="alert"
|
||||
aria-live="assertive"
|
||||
aria-atomic="true"
|
||||
id="liveToast"
|
||||
ref={liveToastRef}
|
||||
data-bs-delay="3000"
|
||||
>
|
||||
<div className="fs-5">{state.alertText}</div>
|
||||
<div data-bs-theme="dark">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close m-0"
|
||||
data-bs-dismiss="toast"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,20 +22,21 @@ export default function SitesList({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="form-group">
|
||||
<label htmlFor="sites" className="col-lg-2 control-label">
|
||||
<div className="form-group mb-4">
|
||||
<label htmlFor={`${label}-siteList`} className="col-lg-2 control-label">
|
||||
{label}
|
||||
</label>
|
||||
|
||||
<div className="col-lg-10">
|
||||
<textarea
|
||||
id={`${label}-siteList`}
|
||||
className="form-control"
|
||||
rows={rows ?? 3}
|
||||
onChange={textareaChange}
|
||||
placeholder={placeholder ?? 'http://google.com'}
|
||||
value={sites}
|
||||
></textarea>
|
||||
<span className="help-block">
|
||||
<span className="text-secondary">
|
||||
{helpText}
|
||||
<br />
|
||||
One line per site.
|
||||
|
||||
@@ -30,7 +30,7 @@ export default function WakaTime(): JSX.Element {
|
||||
const isApiKeyValid = apiKeyInvalid(apiKeyFromRedux) === '';
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="py-4 px-2 pt-0">
|
||||
<NavBar />
|
||||
{isApiKeyValid && extensionState === 'notSignedIn' && (
|
||||
<Alert
|
||||
@@ -48,7 +48,7 @@ export default function WakaTime(): JSX.Element {
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
)}
|
||||
<div className="container">
|
||||
<div className="container mt-0">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<MainList loggingEnabled={loggingEnabled} totalTimeLoggedToday={totalTimeLoggedToday} />
|
||||
|
||||
Reference in New Issue
Block a user