Merge pull request #428 from XhmikosR/bs-classes

Use Bootstrap's classes when possible.

src/components/common/Header.tsx

@@ -40,19 +40,14 @@ export const mobileSidebarHide = () => {
 export default () => (
   <header className="app-header navbar">
     <button
-      className="navbar-toggler d-lg-none text-white"
-      style={{ marginLeft: "16px" }}
+      className="navbar-toggler d-lg-none text-white ml-3"
       onClick={mobileSidebarToggle}
       type="button"
     >
       &#9776;
     </button>
-    <Link
-      to="/dashboard"
-      className="navbar-brand"
-      style={{ textAlign: "center" }}
-    >
-      <span style={{ color: "white", lineHeight: "40px" }}>
+    <Link to="/dashboard" className="navbar-brand text-center">
+      <span className="text-white" style={{ lineHeight: "40px" }}>
         <span className="navbar-brand-full">
           Pi-
           <b>hole</b>

src/components/common/Sidebar.tsx

@@ -141,28 +141,24 @@ const Sidebar = ({ items, t, location }: SidebarProps): ReactElement => (
   <div className="sidebar">
     <nav className="sidebar-nav">
       <Nav>
-        <li className="nav-title">
+        <li className="nav-title" style={{ textTransform: "none" }}>
           <img
             src={logo}
-            className="img-responsive pull-left"
+            className="img-responsive float-left"
             style={{ height: "67px" }}
             alt=""
           />
           <p
-            className="pull-left"
+            className="float-left pl-3 text-white mb-0"
             style={{
-              paddingLeft: "15px",
-              textTransform: "initial",
-              fontSize: "14px",
-              marginBottom: "initial",
-              lineHeight: "14px",
-              color: "white"
+              fontSize: "0.875rem",
+              lineHeight: "1"
             }}
           >
             {t("Status")}
           </p>
           <br />
-          <span style={{ textTransform: "initial", paddingLeft: "15px" }}>
+          <span className="pl-3">
             <StatusBadge />
           </span>
         </li>

src/components/dashboard/SummaryStats.tsx

@@ -37,7 +37,7 @@ class SummaryStats extends Component<SummaryStatsProps & WithTranslation, {}> {
             </div>
             <div className="card-img-overlay">
               <h3>{this.props.totalQueries}</h3>
-              <p style={{ marginBottom: "0px" }}>
+              <p className="mb-0">
                 {t("Total Queries ({{count}} clients)", {
                   count: this.props.uniqueClients
                 })}
@@ -54,7 +54,7 @@ class SummaryStats extends Component<SummaryStatsProps & WithTranslation, {}> {
             </div>
             <div className="card-img-overlay">
               <h3>{this.props.blockedQueries}</h3>
-              <p style={{ marginBottom: "0px" }}>{t("Queries Blocked")}</p>
+              <p className="mb-0">{t("Queries Blocked")}</p>
             </div>
           </div>
         </div>
@@ -67,7 +67,7 @@ class SummaryStats extends Component<SummaryStatsProps & WithTranslation, {}> {
             </div>
             <div className="card-img-overlay">
               <h3>{this.props.percentBlocked}</h3>
-              <p style={{ marginBottom: "0px" }}>{t("Percent Blocked")}</p>
+              <p className="mb-0">{t("Percent Blocked")}</p>
             </div>
           </div>
         </div>
@@ -80,7 +80,7 @@ class SummaryStats extends Component<SummaryStatsProps & WithTranslation, {}> {
             </div>
             <div className="card-img-overlay">
               <h3>{this.props.gravityDomains}</h3>
-              <p style={{ marginBottom: "0px" }}>{t("Domains On Blocklist")}</p>
+              <p className="mb-0">{t("Domains On Blocklist")}</p>
             </div>
           </div>
         </div>

src/components/dashboard/TopBlockedClients.tsx

@@ -49,7 +49,7 @@ export const generateRows = (t: i18next.TFunction) => (
       <tr key={item.name + "|" + item.ip}>
         <td>{item.name !== "" ? item.name : item.ip}</td>
         <td>{item.count.toLocaleString()}</td>
-        <td style={{ verticalAlign: "middle" }}>
+        <td className="align-middle">
           <div
             className="progress"
             title={t("{{percent}}% of {{total}}", {

src/components/dashboard/TopBlockedDomains.tsx

@@ -49,7 +49,7 @@ export const generateRows = (t: i18next.TFunction) => (
       <tr key={item.domain}>
         <td>{item.domain}</td>
         <td>{item.count.toLocaleString()}</td>
-        <td style={{ verticalAlign: "middle" }}>
+        <td className="align-middle">
           <div
             className="progress"
             title={t("{{percent}}% of {{total}}", {

src/components/dashboard/TopClients.tsx

@@ -47,7 +47,7 @@ export const generateRows = (t: i18next.TFunction) => (
       <tr key={item.name + "|" + item.ip}>
         <td>{item.name !== "" ? item.name : item.ip}</td>
         <td>{item.count.toLocaleString()}</td>
-        <td style={{ verticalAlign: "middle" }}>
+        <td className="align-middle">
           <div
             className="progress"
             title={t("{{percent}}% of {{total}}", {

src/components/dashboard/TopDomains.tsx

@@ -47,7 +47,7 @@ export const generateRows = (t: i18next.TFunction) => (
       <tr key={item.domain}>
         <td>{item.domain}</td>
         <td>{item.count.toLocaleString()}</td>
-        <td style={{ verticalAlign: "middle" }}>
+        <td className="align-middle">
           <div
             className="progress"
             title={t("{{percent}}% of {{total}}", {

src/components/list/DomainList.tsx

@@ -25,7 +25,7 @@ const DomainList = ({ domains, onRemove, t }: DomainListProps) => {
     <Button
       color="danger"
       size="sm"
-      className="pull-right"
+      className="float-right"
       style={{ marginTop: "2px" }}
       onClick={() => onRemove(item)}
     >
@@ -37,13 +37,7 @@ const DomainList = ({ domains, onRemove, t }: DomainListProps) => {
   const mapDomainsToListItems = (domain: string) => (
     <li key={domain} className="list-group-item">
       {api.loggedIn ? removeButton(domain) : null}
-      <span
-        style={{
-          display: "table-cell",
-          verticalAlign: "middle",
-          height: "32px"
-        }}
-      >
+      <span className="d-table-cell align-middle" style={{ height: "32px" }}>
         {domain}
       </span>
     </li>

src/components/list/ListPage.tsx

@@ -157,7 +157,7 @@ export class ListPage extends Component<
 
   render() {
     return (
-      <div style={{ marginBottom: "24px" }}>
+      <div className="mb-4">
         <h2 className="text-center">{this.props.title}</h2>
         <br />
         <DomainInputContainer

src/components/log/QueryLog.tsx

@@ -244,8 +244,8 @@ class QueryLog extends Component<WithTranslation, QueryLogState> {
 
     return (
       <ReactTable
-        className="-striped"
-        style={{ background: "white", marginBottom: "24px", lineHeight: 1 }}
+        className="-striped bg-white mb-4"
+        style={{ lineHeight: 1 }}
         columns={columns(t)}
         showPaginationTop={true}
         sortable={false}

src/components/login/ForgotPassword.tsx

@@ -46,15 +46,15 @@ class ForgotPassword extends Component<
       <div className="full-width">
         <div
           className={
-            "card mb0 " + (this.props.error ? "border-danger" : "border-white")
+            "card mb-0 " + (this.props.error ? "border-danger" : "border-white")
           }
         >
-          <div className={this.props.error ? "bg-danger" : "bg-white pr0"}>
-            <span className={this.props.error ? "pull-left" : "pull-right"}>
+          <div className={this.props.error ? "bg-danger" : "bg-white pr-0"}>
+            <span className={this.props.error ? "float-left" : "float-right"}>
               <button
                 type="button"
                 className={
-                  "pr0 " + (this.props.error ? "btn disabled" : "btn btn-link")
+                  "pr-0 " + (this.props.error ? "btn disabled" : "btn btn-link")
                 }
                 onClick={this.onClick}
               >
@@ -66,7 +66,7 @@ class ForgotPassword extends Component<
             className={
               "card-body bg-white " +
               (this.isExpanded() ? "" : " collapse ") +
-              (this.props.error ? "p12" : "p0")
+              (this.props.error ? "p12" : "p-0")
             }
           >
             {t("forgot_password_description")}

src/components/settings/DnsListItem.tsx

@@ -19,7 +19,7 @@ export interface DnsListItemProps {
 const DnsListItem = ({ address, onRemove }: DnsListItemProps) => (
   <ListGroupItem>
     {address}
-    <Button color="danger" size="sm" className="pull-right" onClick={onRemove}>
+    <Button color="danger" size="sm" className="float-right" onClick={onRemove}>
       <span className="far fa-trash-alt" />
     </Button>
   </ListGroupItem>

src/components/settings/FTLInfo.tsx

@@ -62,7 +62,7 @@ class FTLInfo extends Component<WithTranslation, FTLInfoState> {
     return (
       <Form>
         <FormGroup row>
-          <Label className="bold" for="queries" sm={4}>
+          <Label className="font-weight-bold" for="queries" sm={4}>
             {t("Queries")}
           </Label>
           <Col sm={8}>
@@ -75,7 +75,7 @@ class FTLInfo extends Component<WithTranslation, FTLInfoState> {
           </Col>
         </FormGroup>
         <FormGroup row>
-          <Label className="bold" for="filesize" sm={4}>
+          <Label className="font-weight-bold" for="filesize" sm={4}>
             {t("Filesize")}
           </Label>
           <Col sm={8}>
@@ -88,7 +88,7 @@ class FTLInfo extends Component<WithTranslation, FTLInfoState> {
           </Col>
         </FormGroup>
         <FormGroup row>
-          <Label className="bold" for="sqliteversion" sm={4}>
+          <Label className="font-weight-bold" for="sqliteversion" sm={4}>
             {t("SQLite version")}
           </Label>
           <Col sm={8}>

src/components/settings/NetworkInfo.tsx

@@ -65,7 +65,7 @@ class NetworkInfo extends Component<WithTranslation, NetworkInfoState> {
     return (
       <Form>
         <FormGroup row>
-          <Label className="bold" for="interface" sm={4}>
+          <Label className="font-weight-bold" for="interface" sm={4}>
             {t("Interface")}
           </Label>
           <Col sm={8}>
@@ -78,7 +78,7 @@ class NetworkInfo extends Component<WithTranslation, NetworkInfoState> {
           </Col>
         </FormGroup>
         <FormGroup row>
-          <Label className="bold" for="ipv4_address" sm={4}>
+          <Label className="font-weight-bold" for="ipv4_address" sm={4}>
             {t("IPv4 address")}
           </Label>
           <Col sm={8}>
@@ -91,7 +91,7 @@ class NetworkInfo extends Component<WithTranslation, NetworkInfoState> {
           </Col>
         </FormGroup>
         <FormGroup row>
-          <Label className="bold" for="ipv6_address" sm={4}>
+          <Label className="font-weight-bold" for="ipv6_address" sm={4}>
             {t("IPv6 address")}
           </Label>
           <Col sm={8}>
@@ -104,7 +104,7 @@ class NetworkInfo extends Component<WithTranslation, NetworkInfoState> {
           </Col>
         </FormGroup>
         <FormGroup row>
-          <Label className="bold" for="hostname" sm={4}>
+          <Label className="font-weight-bold" for="hostname" sm={4}>
             {t("Hostname")}
           </Label>
           <Col sm={8}>

src/components/settings/VersionCard.tsx

@@ -53,10 +53,7 @@ class VersionCard extends Component<VersionCardProps, VersionCardState> {
             {t("Details")}
           </button>
           <Collapse isOpen={!this.state.collapsed}>
-            <table
-              className="table table-borderless table-sm table-condensed"
-              style={{ marginTop: "1rem", marginBottom: "0" }}
-            >
+            <table className="table table-borderless table-sm table-condensed mt-3 mb-0">
               <tbody>
                 <tr>
                   <td>{t("Branch")}</td>

src/containers/Full.tsx

@@ -30,7 +30,7 @@ export default (props: any) => (
       <div className="app-body">
         <Sidebar items={nav} {...props} />
         <main className="main" onClick={mobileSidebarHide}>
-          <div className="container-fluid" style={{ marginTop: "1.5rem" }}>
+          <div className="container-fluid mt-4">
             <Suspense fallback={null}>
               <Switch>
                 <Redirect exact from="/" to="/dashboard" />

src/scss/_custom.scss

@@ -108,26 +108,10 @@
   text-decoration: line-through !important;
 }
 
-.bold {
-  font-weight: bold;
-}
-
-.p0 {
-  padding: 0;
-}
-
 .p12 {
   padding: 12px;
 }
 
-.pr0 {
-  padding-right: 0;
-}
-
-.mb0 {
-  margin-bottom: 0;
-}
-
 .background-image {
   background: url("../img/backgroundLight.png") repeat fixed;
 }
@@ -199,14 +183,6 @@
   margin-top: 0.2rem;
 }
 
-.pull-left {
-  float: left;
-}
-
-.pull-right {
-  float: right;
-}
-
 .nav-item button {
   cursor: pointer;
 }

src/views/Login.tsx

@@ -97,18 +97,15 @@ class Login extends Component<LoginProps, LoginState> {
     const { t } = this.props;
 
     return (
-      <div
-        className="mainbox col-md-8 offset-md-2 col-lg-6 offset-lg-3"
-        style={{ float: "none" }}
-      >
+      <div className="mainbox col-md-8 offset-md-2 col-lg-6 offset-lg-3 float-none">
         <div className="card">
           <div className="card-header">
-            <div style={{ textAlign: "center" }}>
+            <div className="text-center">
               <img src={logo} alt="Logo" width="30%" />
             </div>
             <br />
 
-            <div className="card-title text-center" style={{ marginBottom: 0 }}>
+            <div className="card-title text-center mb-0">
               <span className="logo-lg" style={{ fontSize: "25px" }}>
                 Pi-
                 <b>hole</b>
@@ -129,7 +126,7 @@ class Login extends Component<LoginProps, LoginState> {
               ) : null}
               {// If cookies are not enabled (or detected), show a warning
               !this.state.cookiesEnabled ? (
-                <div className="text-center" style={{ color: "#F00" }}>
+                <div className="text-center text-danger">
                   {t("Verify that cookies are allowed for {{host}}", {
                     host: window.location.host
                   })}