JSFiddle - React, Tailwind, and code Playground

Yakadrive Check-in Dialog

by Meredith Crow

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/themes/ui-dialog/ui.themeroller.theme.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/jquery-ui.structure.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/bootstrap.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/yakabox5.css">

<div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-draggable-handle" style="width:100%;"><img src="https://i.imgur.com/cQAWoO1.png" style="float:left" width="16"/><span class="ui-dialog-title" style="text-align:left;">&nbsp;Electron</span><button type="button" class="ui-button ui-corner-all ui-widget fa fa-window-minimize" title="Close"><span class="ui-button-icon-space"> </span></button><button type="button" class="ui-button ui-corner-all ui-widget fa fa-window-maximize" title="Close"><span class="ui-button-icon-space"> </span></button><button type="button" class="ui-button ui-corner-all ui-widget fa fa-times" title="Close"><span class="ui-button-icon-space"> </span></button></div>
<div class="ui-yakabox-yakadrive-checkIn-dialog table-responsive">
<table class="table table-bordered table-condensed">
  <thead class="ui-light">
    <tr>
      <th scope="col" colspan="2">File Name</th>
      <th scope="col">Status</th>
      <th scope="col">Open in<br />Explorer</th>
      <th scope="col">Open in<br />Browser</th>
    </tr>
  </thead>
  <tbody>
    <tr class="ui-disabled">
      <td scope="col"...

SCSS

body {
    
    background: url(https://www.yakabod.com/hubfs/iStock-629074838.jpg?t=1534449474747);
    background-repeat: no-repeat;
    background-size: 630px 100%;
    background-position:center;
    color:#fff;
    width: 630px;
    margin: auto;
    text-align:center;

}
body:after {
  background: rgba(37,169,225,1);
    background: -moz-linear-gradient(left,rgba(37,169,225,1) 0%,rgba(0,116,106,1) 100%);
    background: -webkit-gradient(left top,right top,color-stop(0%,rgba(37,169,225,1)),color-stop(100%,rgba(0,116,106,1)));
    background: -webkit-linear-gradient(left,rgba(37,169,225,1) 0%,rgba(0,116,106,1) 100%);
    background: -o-linear-gradient(left,rgba(37,169,225,1) 0%,rgba(0,116,106,1) 100%);
    background: -ms-linear-gradient(left,rgba(37,169,225,1) 0%,rgba(0,116,106,1) 100%);
    background: linear-gradient(to right,rgba(37,169,225,1) 0%,rgba(0,116,106,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a4d3',endColorstr='#00756c',GradientType=1);
    opacity: .95;
    bottom: 0;
    content: "";   
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 630px;
    z-index: -1;
   	margin: auto;
		max-height: 500px;
    margin-top: 0px;
}
.control-label {
  color:#fff;
}
.form-group {
  border-color:lightblue;
}
.help-block {
  color: #fff;
  opacity:.7;
}
.list-group-item {
  color:black
}

.ui-dialog-title {
    float: left;
    margin: .1em .1em .1em .1em;
    white-space: nowrap;
    width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;		
		
}

.ui-widget-header {
    border: 1px solid gray;
    background: white;
    color: gray;
    font-weight: normal;
		vertical-align:middle;
}
		.ui-button {
    float: left;
		border: none;
    display: inline-block;
	 color: gray;
   padding-top: 0px;
   padding-bottom: 0px;
	 font: normal normal normal 14px/1 FontAwesome;
}



//Peter, start using styles for the Check-in diaglog here :) //


.ui-yakabox-yakadrive-checkIn-dialog {
	margin-top:...